bug h1 transition page

user/themes/gilles_acezat/js/site.js

@@ -67,8 +67,8 @@ function contact() {
     })
 }
 
+var $page = $('#page-wrapper.blog');
 function customscroll($page_item) {
-  var $page = $('#page-wrapper.blog');
   var $page_item = $("body.blog #start, body.item");
 
   $page_item.mCustomScrollbar({
@@ -104,10 +104,41 @@ function customscroll($page_item) {
   });
 }
 
+function clickscroll() {
+  var $btnscroll = $('.scroll');
+  $btnscroll.on('click', function() {
+    $page.addClass("down");
+  })
+}
+
+function transitionPage() {
+  // var $links = $('a');
+  // $links.on('click', function(e) {
+  //   var $link = $(this).attr("href");
+  //   setTimeout(function() {
+  //     window.location.href = $link;
+  //   }, 10000);
+  //
+  //   $links.parents('#top').fadeOut()
+  // })
+
+  $("a:not(.filter)").click(function(e) {
+		var link = $(this).attr("href");
+    $(this).parents('#top').fadeOut()
+    setTimeout(function() {
+        window.location.href = link;
+    }, 600);
+    e.preventDefault();
+});
+    $('#top').fadeIn(1000).removeClass('hidden');
+}
+
 jQuery(document).ready(function($) {
     masonry();
     filteritem();
     contact();
     customscroll();
-
+    clickscroll();
+    transitionPage();
+    // $('#top').fadeIn();
 });

user/themes/gilles_acezat/scss/configurations/_animation.scss

@@ -92,22 +92,18 @@
 
 @-webkit-keyframes reducH{
   0%{
-    font-size: $fh1;
-    -webkit-text-stroke : 2px black;
-    color: transparent;
-    line-height: 5rem;
+    fill: white!important;
+    stroke-width:3!important;
   }
 
   70%{
-    -webkit-text-stroke : 1px black;
-    color: black;
+    // -webkit-text-stroke : 1px black;
+    // color: black;
   }
 
   100%{
-    font-size: $min-h1;
-    -webkit-text-stroke : 0px black;
-    color: black;
-    line-height: 5rem;
+    fill: black!important;
+    stroke-width:0!important;
   }
 }
 

user/themes/gilles_acezat/scss/theme/_header.scss

@@ -4,24 +4,32 @@ body {
     margin: 0 10px;
       header {
           height:100vh;
-          width: calc(100% - 20px);
-          display: -webkit-inline-box;
-          display: -ms-inline-flexbox;
+          width: calc(100% - 22px);
           display: inline-flex;
-          -webkit-box-orient: vertical;
-          -webkit-box-direction: normal;
-              -ms-flex-direction: column;
-                  flex-direction: column;
-          -ms-flex-line-pack: distribute;
-              align-content: space-around;
+          flex-direction: column;
+          align-content: space-around;
           & > div{
             position: fixed;
-            width: calc(100% - 20px);
             &.head{
               z-index: 999;
-              padding-top: 4vw;
+              padding-top: 25px;
+              width: inherit;
+              .svg-container {
+                display: inline-block;
+                position: relative;
+                width: calc( ( 100% / 3 ) * 2 - 22px ) ;
+                padding-bottom: 9%;
+                vertical-align: middle;
+                overflow: hidden;
+                .svg-content {
+                  display: inline-block;
+                  position: absolute;
+                  top: 0;
+                  left: 0;
+                }
+              }
               h2 {
-                margin-left: 8px;
+                margin-left: -4px;
                 position: absolute;
                 left: 0;
               }
@@ -34,15 +42,11 @@ body {
               }
             }
             &.works-mea {
-              display: -webkit-inline-box;
-              display: -ms-inline-flexbox;
               display: inline-flex;
-              -ms-flex-item-align: end;
-                  align-self: flex-end;
-              height: calc(100% - 20px);
-              -webkit-box-align: end;
-                  -ms-flex-align: end;
-                      align-items: flex-end;
+              align-self: flex-end;
+              height: calc(100% - 25px);
+              align-items: flex-end;
+              width: inherit;
               .card{
                 &:nth-child(2){
                   margin:0 10px;
@@ -55,24 +59,33 @@ body {
             &.scroll{
               bottom: 0;
               text-align: center;
+              width: inherit;
             }
           }
       }
       &.down{
         header{
-          height: 5rem;
           .head{
-            padding:0;
-            -webkit-transition: all 1s 0.9s ease;
-            transition: all 1s 0.9s ease;
+            .svg-container {
+              width: 250px;
+              transition: all 1s 0.9s ease;
+              padding-bottom: calc(70px - 7px);
+              .svg-content {
+                path{
+                  transition: all 1s 0.9s ease;
+                  fill: black!important;
+                  stroke-width:0!important;
+                }
+              }
+            }
             &::after{
               -webkit-animation: showborder 2.5s 1.5s ease forwards;
                       animation: showborder 2.5s 1.5s ease forwards;
             }
+
             h2{
               opacity: 0;
               left: -40%;
-              -webkit-transition: left 3s linear, opacity 0.3s 0.1s ease;
               transition: left 3s linear, opacity 0.3s 0.1s ease;
             }
           }
@@ -92,7 +105,6 @@ body {
         }
         .scroll{
           opacity: 0;
-          -webkit-transition: all 1s ease;
           transition: all 1s ease;
         }
       }
@@ -107,12 +119,10 @@ body {
   position: fixed;
   top: 0px;
   right: 0px;
-  -webkit-transition: width 0.5s ease;
   transition: width 0.5s ease;
   cursor: pointer;
   &:hover{
     width: 80px;
-    -webkit-transition: width 0.5s ease;
     transition: width 0.5s ease;
   }
   svg{
@@ -136,14 +146,12 @@ body {
     -webkit-transform: scale(15);
             transform: scale(15);
     height: auto;
-    -webkit-transition: -webkit-transform 0.5s ease;
     transition: -webkit-transform 0.5s ease;
     transition: transform 0.5s ease;
     transition: transform 0.5s ease, -webkit-transform 0.5s ease;
     h3{
       color: transparent;
       left: 500px;
-      -webkit-transition: visibility 0.5 ease left 1s ease;
       transition: visibility 0.5 ease left 1s ease;
     }
     svg{
@@ -165,7 +173,6 @@ body {
   &.close{
     -webkit-transform: scale(1);
             transform: scale(1);
-    -webkit-transition: -webkit-transform 0.5s 0.1s ease;
     transition: -webkit-transform 0.5s 0.1s ease;
     transition: transform 0.5s 0.1s ease;
     transition: transform 0.5s 0.1s ease, -webkit-transform 0.5s 0.1s ease;
@@ -178,11 +185,9 @@ body {
                 animation: translateleft 1s ease forwards;
     }
     h3{
-      -webkit-transition: color 0.5s 0.5s ease, left 0.5s ease;
       transition: color 0.5s 0.5s ease, left 0.5s ease;
     }
     &:hover{
-      -webkit-transition: -webkit-transform 0.5s ease!important;
       transition: -webkit-transform 0.5s ease!important;
       transition: transform 0.5s ease!important;
       transition: transform 0.5s ease, -webkit-transform 0.5s ease!important;
@@ -195,6 +200,9 @@ body {
 body {
   #page-wrapper.item {
     header {
+      z-index: 999;
+      padding-top: 25px;
+      width: inherit;
       border-bottom: 1px solid black;
       position: fixed;
       height: 5rem;
@@ -203,9 +211,22 @@ body {
       left: 10px;
       right: 10px;
       z-index: 999;
+        .head{
+          .svg-container {
+            width: 250px;
+            transition: all 1s 0.9s ease;
+            .svg-content {
+              path{
+                transition: all 1s 0.9s ease;
+                fill: black!important;
+                stroke-width:0!important;
+              }
+            }
+          }
+        }
       h1 {
-        color: black;
-        line-height: 5rem;
+        // color: black;
+        // line-height: 5rem;
       }
       h2, .scroll {
         display: none;

user/themes/gilles_acezat/scss/theme/_home.scss

@@ -4,13 +4,6 @@
         width: 100%;
         z-index: 999;
         left: -100%;
-        &::before{
-          display: block;
-          content: " ";
-          width: 0%;
-          height: 1px;
-          background: black;
-        }
         &::after {
           display: block;
           content: " ";
@@ -28,18 +21,21 @@
             display: -webkit-box;
             display: -ms-flexbox;
             display: flex;
-            margin-right: 10px;
-            &::after{
-              width: 5px;
-              content: " ";
-            }
-            &:hover{
+            .btn a{
+              margin-right: 10px;
               &::after{
-                content: "\002022";
+                position: absolute;
+                content: " ";
+                width: 5px;
+              }
+              &:hover, &.active{
+                &::after{
+                  content: "\002022";
+                }
+              }
+              input{
+                display: none;
               }
-            }
-            input{
-              display: none;
             }
           }
         }

user/themes/gilles_acezat/scss/theme/_typography.scss

@@ -33,14 +33,8 @@ time{
 }
 
 .blog{
-  h1{
-    font-size: $fh1;
-    line-height: 5vw;
-    -webkit-text-stroke: 2px black;
-    color: transparent;
-  }
   h2{
-    line-height: 8vw;
+    line-height: 6vw;
   }
   &.down{
     h1{

user/themes/gilles_acezat/scss/theme/all.scss

@@ -30,3 +30,10 @@ html, body{
     }
   }
 }
+
+.scroll{
+  cursor: pointer;
+}
+#top{
+  display: none;
+}

user/themes/gilles_acezat/scss/theme/item.scss

@@ -44,7 +44,7 @@ body{
           width: calc(100% / 3);
           height: 100%;
           position: absolute;
-          top: calc( 50% + 10px );
+          top: calc( 50% + 1.5rem );
           -webkit-transform: translateY(-50%);
                   transform: translateY(-50%);
           right: 0px;

user/themes/gilles_acezat/scss/theme/mobile.scss

@@ -1,4 +1,5 @@
 @media screen and (max-width: 960px) {
+
   .works-mea{
     & > div:last-child{
       display: none;

user/themes/gilles_acezat/templates/partials/blog-item.html.twig

@@ -83,8 +83,17 @@
 </div>
 
   <div class="top">
-    <a href="">
-      <img src="user/themes/gilles_acezat/images/arrow-top.svg" alt="">
+      <!-- <img src="user/themes/gilles_acezat/images/arrow-top.svg" alt=""> -->
+      <svg
+         version="1.1"
+         width="9.2404556"
+         height="8.180007">
+      <path
+         style="fill:#000000;fill-opacity:0;stroke:#000000;stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="M 8.7368705,7.6738333 4.5950186,0.49994998 0.50358559,7.5865262"
+         id="path995"
+         inkscape:connector-curvature="0" />
+      </svg>
+
       <p>top</p>
-    </a>
   </div>

user/themes/gilles_acezat/templates/partials/taxonomylist.html.twig

@@ -1,12 +1,15 @@
 {% set taxlist = children_only is defined ? taxonomylist.getChildPagesTags() : taxonomylist.get() %}
 
 {% if taxlist %}
+<div data-toggle="buttons" class="btn-group">
+    <label class="btn btn-default">
+      <a class="filter" href="#" data-filter="">Tous</a>
+    </label>
     {% for tax,value in taxlist[taxonomy] %}
         {% set label_class = uri.param(taxonomy) == tax ? 'label-primary' : 'label-secondary' %}
-        <div data-toggle="buttons" class="btn-group">
           <label class="btn btn-default">
-            <a href="#" data-filter="{{ tax }}">{{tax}}</a>
+            <a class="filter" href="#" data-filter="{{ tax }}">{{tax}}</a>
           </label>
-        </div>
     {% endfor %}
+  </div>
 {% endif %}