v3 added

scripts/v3.js

@@ -1,6 +1,85 @@
 
 
 
+
+
+//############################################# -- Intro Animations
+
+const heroTextSection = document.querySelector(".hero-section > div:nth-child(2)");
+const myImageBlock = document.querySelector(".benjamin-image-block");
+const myBigTextBlock = document.querySelector(".benjamin-big-text-block");
+const mainTextBlock = document.querySelector(".main-text-block");
+const mainCTA = document.querySelector(".main-cta-button");
+const allHeaderElements = document.querySelectorAll("header *");
+
+
+function intro() {
+    
+    anime({
+        targets: heroTextSection,
+        width: [0, "50%"],
+        opacity: [0, 1],
+        easing: "cubicBezier(0, 0.72, 0.355, 1)",
+        duration: 800,
+        delay: 1400,
+    });
+    
+    anime({
+        targets: allHeaderElements,
+        translateX: [-20, 0],
+//        rotateY: [50, 0],
+        opacity: [0, 1],
+        easing: "easeInOutQuad",
+        duration: 800,
+        delay: anime.stagger(100, {start: 1000}/* , {easing: 'easeOutQuad'} */),
+    });
+    
+    anime({
+        targets: myBigTextBlock,
+        translateY: [100, 0],
+        opacity: [0, 1],
+        easing: "cubicBezier( 0.1, 0.63, 0.355, 1 )",
+        duration: 1200,
+        delay: 2000,
+    });
+    
+    anime({
+        targets: myImageBlock,
+        translateY: [100, 0],
+        opacity: [0, 1],
+        easing: "cubicBezier( 0.1, 0.63, 0.355, 1 )",
+        duration: 1500,
+        delay: 2200,
+    });
+    
+    anime({
+        targets: mainTextBlock,
+        translateX: [-50, 0],
+        opacity: [0, 1],
+        easing: "cubicBezier( 0.1, 0.63, 0.355, 1 )",
+        duration: 800,
+        delay: 2800,
+    });
+    
+    anime({
+        targets: mainCTA,
+        translateX: [-50, 0],
+        opacity: [0, 1],
+        easing: "cubicBezier( 0.1, 0.63, 0.355, 1 )",
+        duration: 800,
+        delay: 2900,
+    });
+    
+}
+
+intro();
+
+
+
+
+
+//############################################# -- Header Scroll interactions
+
 var headerController = document.querySelector("#header-controller");
 var windowRect = {
     rootMargin: "0px",
@@ -12,15 +91,57 @@ function changeHeader(entry) {
     
     if(entry[0].isIntersecting) {
         document.querySelector("header").className = "none";
-        document.querySelector("header img").style.width = "40px";
+        anime({
-        document.querySelector("header img").style.top = "0px";
+            targets: "header img",
-        document.querySelector("header > a > div").classList.remove("logo-text-dissapear");
+            width: 40,
+            height: 100,
+            top: 0,
+            duration: 400,
+            easing: "easeOutCubic",
+        });
+        
+        anime({
+            targets: "header > a > div",
+            translateX: 0,
+            opacity: 1,
+            duration: 1000,
+        });
+        
     } else {
         document.querySelector("header").classList.add("scrolled");
-        document.querySelector("header img").style.width = "60px";
+        anime({
-        document.querySelector("header img").style.top = "20px";
+            targets: "header img",
-        document.querySelector("header > a > div").classList.add("logo-text-dissapear");
+            width: 60,
+            height: 130,
+            top: 20,
+            duration: 400,
+            easing: "easeOutCubic",
+        });
+        
+        anime({
+            targets: "header > a > div",
+            translateX: -50,
+            opacity: 0,
+            duration: 1000,
+        });
     }
 }
 
+setTimeout(() => {
     headerObserver.observe(headerController);
+}, 2000);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

v3.css

@@ -15,6 +15,10 @@ html {
     line-height: 1.5;
     color: #222;
     position: relative;
+/*
+    animation-timing-function: linear;
+    transition-timing-function: linear;
+*/
 }
 
 :root {
@@ -48,9 +52,14 @@ header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    transition: all .3s ease;
     height: 140px;
     overflow: hidden;
+    perspective: 500;
+    transition: all .3s ease;
+}
+
+header * {
+/*    transition: all .5s ease;*/
 }
 
 header.scrolled {
@@ -72,7 +81,7 @@ header.scrolled {
 header img {
     width: 40px;
     margin-right: 10px;
-    transition: all .3s ease;
+/*    transition: all .3s ease;*/
     position: relative;
     top: 0;
 }
@@ -85,18 +94,15 @@ header > a {
     align-items: center;
     font-weight: 900;
     position: relative;
+    perspective: 500px;
+    transform-style: preserve-3d;
 }
 
 header > a > div {
     line-height: 16px;
     font-size: 24px;
     color: var(--dark-color);
-    transition: all .3s ease;
+/*    transition: all .3s ease;*/
-}
-
-.logo-text-dissapear {
-    transform: translateX(-50px);
-    opacity: 0;
 }
 
 nav {
@@ -161,7 +167,7 @@ a {
 	border: none;
     cursor: pointer;
     font-size: inherit;
-    transition: all .3s ease-out;
+/*    transition: all .3s ease-out;*/
 }
 
 a:hover {
@@ -241,7 +247,7 @@ button {
 	padding: 10px 20px;
 	color: white;
 	cursor: pointer;
-    transition: all .2s ease-out;    
+/*    transition: all .2s ease-out;    */
     background-image: linear-gradient(var(--main-color),var(--main-color));
     background-repeat: no-repeat;
     background-position: 0px 67px;
@@ -321,6 +327,7 @@ input:focus {
 
 .hero-section {
     background-color: #1b239b;
+    justify-content: space-between;
 }
 
 .hero-section > div:nth-child(1) {
@@ -332,6 +339,7 @@ input:focus {
     padding: 25vh 40px 40px 6.2vw;
     font-size: 2.5vw;
     display: inline;
+/*    opacity: 0;*/
 }
 
 .main-text-block {
@@ -371,10 +379,9 @@ input:focus {
 }
 
 #mountains {
-    min-width: 70%;
+    width: 100%;
-    height: 100vh;
+    min-height: 100vh;
-    left: -200px;
+    bottom: -20vh;
-    bottom: -20px;
 }
 
 .benjamin-image-block {
@@ -387,6 +394,7 @@ input:focus {
     background-image: url("images/hero-image-ben.jpg");
     background-size: cover;
     opacity: .8;
+    padding: 0;
 }
 
 .benjamin-big-text-block {

v3.html

@@ -111,6 +111,7 @@
     
     <!-- #################################################################################-- Scripts -->
     
+    <script src="scripts/anime.min.js"></script>    
     <script src="scripts/v3.js"></script>
     
 </body>