Adicioado logo em animação em js

Author: mvfsillva

_src/js/main.js

@@ -9,12 +9,14 @@
           pageSize = (doc.clientHeight - window.innerHeight),
           percentageScrolled = Math.floor((scrollPosition / pageSize) * 100); 
 
-          if (percentageScrolled > 65){
+          if (percentageScrolled > 50){
             document.querySelector('.transparent').className = 'blue';
+            document.querySelector('.new-logo').style.display = '';
           } 
 
           else{
             document.querySelector('.blue').className = 'transparent';
+            document.querySelector('.new-logo').style.display = 'none';
           }
 
         }; 

_src/sass/_header.scss

@@ -3,15 +3,24 @@
     position: absolute;
 }
 
+.new-logo{
+  position:relative;
+  top: -3.5rem;
+  > img{
+    width:250px;  
+  }
+   transition: all 0.45s linear;
+}
+
 .blue{
-  transition: all 0.65s linear;
+  transition: all 0.45s linear;
 }
 
 .transparent {
     -webkit-box-shadow: none;
     box-shadow: none;
     background: none;
-    transition: all 0.65s linear;
+    transition: all 0.45s linear;
 }
 
 .parallax-container {

assets/css/main.css

@@ -2,14 +2,21 @@
   top: 0;
   position: absolute; }
 
+.new-logo {
+  position: relative;
+  top: -3.5rem;
+  transition: all 0.45s linear; }
+  .new-logo > img {
+    width: 250px; }
+
 .blue {
-  transition: all 0.65s linear; }
+  transition: all 0.45s linear; }
 
 .transparent {
   -webkit-box-shadow: none;
   box-shadow: none;
   background: none;
-  transition: all 0.65s linear; }
+  transition: all 0.45s linear; }
 
 .parallax-container {
   min-height: 100vh;