diff --git a/scripts/v2.js b/scripts/v2.js new file mode 100644 index 0000000..23fe3ee --- /dev/null +++ b/scripts/v2.js @@ -0,0 +1,19 @@ + + + + +const translate = document.querySelectorAll(".translate"); +var watermark = document.querySelector(".hero-watermark"); +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)"; + }); + +}); \ No newline at end of file diff --git a/v2.css b/v2.css index 6f00e64..aa657cf 100644 --- a/v2.css +++ b/v2.css @@ -14,6 +14,7 @@ html { font-size: 18px; line-height: 1.5; color: #222; + position: relative; } :root { @@ -222,7 +223,7 @@ input:focus { display: flex; flex-direction: column; align-items: center; - margin-right: 50px; + margin-right: -20px; } #benjamin-hero-text { @@ -260,7 +261,7 @@ input:focus { } .hero-text-wrapper { - width: 300px; + width: 200px; padding-top: 100px; align-items: flex-start; margin-left: 50px; @@ -280,6 +281,38 @@ input:focus { padding: 12px 23px; } +.scroll-down-link-block { + position: absolute; + background-color: white; + color: #222; + font-size: 36px; + font-weight: 700; + top: -200px;; + right: 40vw; + display: flex; + align-items: center; + justify-content: center; + width: 70px; + height: 80px; + border-radius: 10px; + padding-top: 20px; + cursor: pointer; +} + +.scroll-link-icon { + transform: rotate(90deg); + font-size: inherit; + font-weight: inherit; + display: flex; + align-items: center; + justify-content: center; + padding: 0; + margin: 0; + text-align: center; + line-height: 1; + left: 3px; +} + .hero-text-block { font-size: 24px; font-weight: 500; @@ -350,6 +383,22 @@ input:focus { +/*Animations*/ + +.translate { + +} + + + + + + + + + + + diff --git a/v2.html b/v2.html index 12ffe6d..772f977 100644 --- a/v2.html +++ b/v2.html @@ -36,7 +36,7 @@
-
+
Benjamin
Toby
@@ -59,9 +59,25 @@
-
T-BEN
-
+ + + + + +
T-BEN
+ + + + + + + +
+ +

Some of my Work

@@ -69,11 +85,25 @@
-
+
+ + + + + +
+ + + + + + + +