From 87d3205297d0f57a9c4291f5bbe66784a655cc13 Mon Sep 17 00:00:00 2001 From: BenjaminToby <52448020+BenjaminToby@users.noreply.github.com> Date: Mon, 7 Jun 2021 09:12:19 +0100 Subject: [PATCH] More mobile fixes --- scripts/v2.js | 86 ++++++++++++++++++++++++++++++++++----------------- v2.css | 35 +++++++++++++++------ v2.html | 18 +++++------ 3 files changed, 93 insertions(+), 46 deletions(-) diff --git a/scripts/v2.js b/scripts/v2.js index 02ab565..a0c414a 100644 --- a/scripts/v2.js +++ b/scripts/v2.js @@ -27,10 +27,8 @@ window.addEventListener("scroll", () => { }); -//window.scrollBy({ -// top: -100, -// behavior: "smooth" -//}); + + window.addEventListener("load", () => { document.getElementById("skewed-bg-block").classList.add("skewed-bg"); @@ -52,8 +50,10 @@ window.addEventListener("load", () => { var targets = document.querySelectorAll(".menu-color-change"); var windowRect = { rootMargin: "0px 0px -400px 0px", - delay: 100, - trackVisibility: true, +// delay: 100, +// trackVisibility: true, +// thresholds: [0, 0.25, 0.5, 0.75, 1], +// threshold: [...Array(100).keys()].map(x => x / 100), }; var navColors = new IntersectionObserver(navColorFunction, windowRect); @@ -63,13 +63,13 @@ function navColorFunction(entries, navColors) { entries.forEach(entry => { if(entry.isIntersecting) { document.querySelector("header").style.color = "white"; - document.querySelector(".hero-graphic-wrapper").style.opacity = "0"; +// document.querySelector(".hero-graphic-controller").style.opacity = "0"; document.querySelector(".aside-header > a").style.color = "white"; // translate[3].dataset.speed = .2; } else { document.querySelector("header").style.color = "#222"; document.querySelector(".aside-header > a").style.color = "#222"; - document.querySelector(".hero-graphic-wrapper").style.opacity = "1"; +// document.querySelector(".hero-graphic-controller").style.opacity = "1"; } }); } @@ -115,33 +115,61 @@ var sectionOneIo = new IntersectionObserver(sect1Function, windowRect); function sect1Function(entries, sectionOneIo) { - entries.forEach(entry => { - if(entry.isIntersecting) { -// windowRect.thresholds = [0, 0.25, 0.5, 0.75, 1]; -// if (windowRect.thresholds < 0.25) { -// translate[3].dataset.speed = .1; -// } else if (windowRect.thresholds > 0.25 && windowRect.thresholds < 0.5) { -// translate[3].dataset.speed = .2; -// } else if (windowRect.thresholds > 0.5 && windowRect.thresholds < 1) { -// translate[3].dataset.speed = .3; +// entries.forEach(entry => { +// if(entry.isIntersecting) { +//// windowRect.thresholds = [0, 0.25, 0.5, 0.75, 1]; +//// if (windowRect.thresholds == 0.5) { +//// translate[4].dataset.speed = 1; +//// } +// +// if(window.innerWidth > 800) { +// +//// translate[4].dataset.speed = .05; +// translate[4].style.transition = "all .8s cubic-bezier( 0.39, 0.575, 0.565, 1 )"; +//// translate[4].style.position = "sticky"; +// } +// +// } else { +// if(window.innerWidth > 800) { +// translate[4].style.transition = "all .8s cubic-bezier( 0.39, 0.575, 0.565, 1 )"; +// translate[4].dataset.speed = 0; +//// setTimeout(()=> {translate[4].style.transition = "all .8s cubic-bezier( 0.39, 0.575, 0.565, 1 )";}, 1000); // } +// } +// +//// if(entry.intersectionRatio == 0.5) { +//// translate[4].dataset.speed = 1; +//// } +//// +// }); + + if(entries[0].isIntersecting) { + + if(window.innerWidth > 800) { - if(window.innerWidth > 800) { - translate[4].dataset.speed = .2; - translate[4].style.transition = "all 1.8s cubic-bezier( 0.39, 0.575, 0.565, 1 )"; - } + translate[3].dataset.speed = .2; + translate[3].style.transition = "all .7s cubic-bezier( 0.39, 0.575, 0.565, 1 )"; } else { - if(window.innerWidth > 800) { - translate[4].style.transition = "all 1.8s cubic-bezier( 0.39, 0.575, 0.565, 1 )"; - translate[4].dataset.speed = 0; - setTimeout(()=> {translate[4].style.transition = "all .8s cubic-bezier( 0.39, 0.575, 0.565, 1 )";}, 1000); - } + translate[3].dataset.speed = 0; } - }); + + } else { + + if(window.innerWidth > 800) { + + translate[3].dataset.speed = 0.1; + + } else { + translate[3].dataset.speed = 0; + } + + + + } } -sectionOneIo.observe(translate[4]); +sectionOneIo.observe(translate[3]); @@ -179,6 +207,7 @@ window.addEventListener("resize", () => { if(window.innerWidth > 1200) { document.querySelector("nav").className = "none"; document.querySelector("#aside-heder-block").className = "aside-header"; + logo.style.color = "inherit"; hc = 0; } }); @@ -187,6 +216,7 @@ window.addEventListener("resize", () => { document.querySelector(".hamburger-wrapper").onblur = () => { document.querySelector("nav").className = "none"; document.querySelector("#aside-heder-block").className = "aside-header"; + logo.style.color = "inherit"; hc = 0; } diff --git a/v2.css b/v2.css index 2f0cb44..64cad1e 100644 --- a/v2.css +++ b/v2.css @@ -83,12 +83,15 @@ section { padding: 60px 40px; position: relative; width: 100%; + perspective: 500px; } section > div { width: 960px; display: flex; justify-content: center; + perspective: 500px; + transform-style: preserve-3d; } section > div > div{ @@ -411,7 +414,7 @@ input:focus { /* ################################################### Body*/ .hero-section { - + z-index: 1; } .hero-graphic-wrapper-init { @@ -424,6 +427,12 @@ input:focus { opacity: 0; } +/* +#hero-graphic-container { + opacity: 0; +} +*/ + .hero-graphic-wrapper { width: 400px; height: 600px; @@ -601,7 +610,7 @@ input:focus { .skewed-bg { position: absolute; - width: 100% !important; + width: 100%; height: 400px; transform: skewY(-3deg); background-color: var(--main-color); @@ -611,6 +620,8 @@ input:focus { animation-fill-mode: both; animation-delay: 1s; animation-timing-function: cubic-bezier( 0.39, 0.575, 0.565, 1 ); + perspective: none; + transform-style: flat; } @keyframes skewintro { @@ -618,6 +629,11 @@ input:focus { 100%{transform: skewY(-3deg); top: -200px; width: 100%;} } +#my-work-text-section { + perspective: 500px; + transform-style: preserve-3d; +} + .container { color: #222; display: flex; @@ -996,7 +1012,7 @@ input:focus { margin-right: none; margin-left: -20px; margin-top: 50px; - margin-bottom: 50px; + margin-bottom: 100px; } #benjamin-hero-text { @@ -1021,6 +1037,7 @@ input:focus { padding-top: 40px; margin-left: 40px; min-width: 250px; + max-height: 300px; } .scroll-down-link-block { @@ -1066,14 +1083,14 @@ input:focus { } .below-fold { - padding-top: 250px; + padding-top: 150px; padding-bottom: 100px; margin: 0; } .skewed-bg { height: 200px; - margin-top: 150px; + margin-top: 130px; top: 0; } @@ -1272,13 +1289,13 @@ input:focus { } .below-fold { - padding-top: 20px; + padding-top: 100px; padding-bottom: 100px; } .skewed-bg { height: 400px; - margin-top: -70px; + margin-top: -50px; } .section-watermark { @@ -1376,14 +1393,14 @@ input:focus { } .below-fold { - padding-top: 40px; + padding-top: 100px; padding-bottom: 100px; margin: 0; } .skewed-bg { height: 400px; - margin-top: 0px; + margin-top: -60px; } .section-watermark { diff --git a/v2.html b/v2.html index d47a5aa..fb134a7 100644 --- a/v2.html +++ b/v2.html @@ -69,10 +69,10 @@ -
-
+
+
-
+
@@ -80,7 +80,7 @@
-
+
Hi. I'm a

@@ -115,9 +115,9 @@ -