From 5c855e092f53fac9370c48fef7e252711aade0ec Mon Sep 17 00:00:00 2001
From: BenjaminToby <52448020+BenjaminToby@users.noreply.github.com>
Date: Fri, 4 Jun 2021 21:11:31 +0100
Subject: [PATCH] Scroll animations refined

---
 scripts/v2.js |  6 +++++-
 v2.css        | 13 ++++++++++---
 v2.html       | 22 ++++++++++++----------
 3 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/scripts/v2.js b/scripts/v2.js
index 23fe3ee..79abfd1 100644
--- a/scripts/v2.js
+++ b/scripts/v2.js
@@ -4,16 +4,20 @@
 
 const translate = document.querySelectorAll(".translate");
 var watermark = document.querySelector(".hero-watermark");
-var skewedBg = document.querySelector(".skewed-bg");
+//var skewedBg = document.querySelector(".skewed-bg");
 
 
 
 window.addEventListener("scroll", () => {
    
     var scroll = window.pageYOffset;
+    
     translate.forEach(element => {
         let speed = element.dataset.speed;
         element.style.transform = "translateY(" + (scroll * speed) + "px)";
     });
     
+//    skewedBg.style.transform = "translateY(" + (scroll * skewedBg.dataset.speed) + "px) skewY(-3deg)";
+    watermark.style.transform = "translateY(" + (scroll * watermark.dataset.speed) + "px) translateX(-50%)";
+    
 });
\ No newline at end of file
diff --git a/v2.css b/v2.css
index aa657cf..74e454e 100644
--- a/v2.css
+++ b/v2.css
@@ -287,8 +287,8 @@ input:focus {
     color: #222;
     font-size: 36px;
     font-weight: 700;
-    top: -200px;;
-    right: 40vw;
+    top: 480px;;
+    right: 30vw;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -297,6 +297,7 @@ input:focus {
     border-radius: 10px;
     padding-top: 20px;
     cursor: pointer;
+    z-index: 100;
 }
 
 .scroll-link-icon {
@@ -355,6 +356,12 @@ input:focus {
     color: rgba(0,0,0,0.05)
 }
 
+.below-fold {
+    background-color: var(--main-color);
+    padding-top: 200px;
+    padding-bottom: 200px;
+}
+
 .skewed-bg {
     position: absolute;
     width: 100%;
@@ -386,7 +393,7 @@ input:focus {
 /*Animations*/
 
 .translate {
-    
+    transition: all .8s cubic-bezier( 0.39, 0.575, 0.565, 1 );
 }
 
 
diff --git a/v2.html b/v2.html
index 772f977..98d10c9 100644
--- a/v2.html
+++ b/v2.html
@@ -10,7 +10,9 @@
 	<title>Tben Design</title>
     <meta name="description" content="Web/Graphic/Motion Designer, UI UX Designer, Frontend Web Developer">
     <link rel="shortcut icon" type="image/x-icon" href="/images-dw/favicon.ico">
-    <link href="https://fonts.googleapis.com/css?family=Lato:400,500,700,800|Impact|Satisfy" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Lato:400,500,700,800|Impact" rel="stylesheet">
+    <link href="http://fonts.cdnfonts.com/css/impacted" rel="stylesheet">
+
     <link rel="stylesheet" href="v2.css">
 
 </head>
@@ -44,7 +46,7 @@
                 </div>
             </div>
             
-            <div class="hero-text-wrapper">
+            <div class="hero-text-wrapper translate" data-speed=".2">
                 <div class="hero-text-block">
                     Hi. I'm a
                     <h1>
@@ -65,7 +67,11 @@
     
     
     
-    <div class="hero-watermark" data-speed=".2">T-BEN</div>
+    <div class="hero-watermark" data-speed=".6">T-BEN</div>
+    
+    <div  class="scroll-down-link-block">
+            <div class="scroll-link-icon">&rsaquo;</div>
+    </div>
     
     
     
@@ -73,19 +79,15 @@
     
     
     
-    <section style="background-color:var(--main-color);" class="translate" data-speed=".15">
-        <div  class="scroll-down-link-block">
-                <div class="scroll-link-icon">&rsaquo;</div>
-        </div>
-        
+    <section class="below-fold translate" data-speed=".1">        
         <div>
-            <div class="container-darkbg">
+            <div class="container-darkbg translate" data-speed="0">
                 <h2>Some of my Work</h2>
                 <p style="width: 350px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.</p>
             </div>
             <div></div>
         </div>
-        <div class="skewed-bg"  data-speed=".6"></div>
+        <div class="skewed-bg"></div>
     </section>