tben/personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More mobile fixes

Browse Source
This commit is contained in:
BenjaminToby 2021-06-07 09:12:19 +01:00
parent 13c0f9e58a
commit 87d3205297
3 changed files with 93 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
scripts/v2.js
View File

@ -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) {
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 {
translate[3].dataset.speed = 0;
}
} 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.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;
}

35
v2.css
View File

@ -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 {

18
v2.html
View File

@ -69,10 +69,10 @@
<!-- #################################################################################-- Hero Section -->
<section style="z-index:1;perspective:400px;" class="hero-section">
<div style="perspective:400px;transform-style:preserve-3d;" class="hero-container">
<section class="hero-section">
<div class="hero-container">
<div class="hero-graphic-wrapper-init" id="hero-graphic-container">
<div class="hero-graphic-controller translate" data-speed=".25">
<div class="hero-graphic-controller translate" data-speed=".2">
<div id="benjamin-hero-text"></div>
<div class="hero-graphic-block">
<img src="images/placeholder-portrait-2.png" alt="" width="380px" height="auto">
@ -80,7 +80,7 @@
</div>
</div>
<div class="hero-text-wrapper translate" data-speed=".15" style="perspective:500px;transform-style:preserve-3d;">
<div class="hero-text-wrapper translate" data-speed=".1" style="perspective:500px;transform-style:preserve-3d;">
<div class="hero-text-block-init" style="transform-style:preserve-3d;" id="hero-text-controller">
Hi. I'm a
<h1 style="font-family:inherit;">
@ -115,9 +115,9 @@
<!-- #################################################################################-- My Work Section -->
<section class="below-fold translate menu-color-change" data-speed=".1" id="section-2">
<div style="perspective:400px;transform-style:preserve-3d;">
<div class="container-darkbg translate" data-speed="0" style="perspective:400px;transform-style:preserve-3d;">
<section class="below-fold menu-color-change" data-speed=".1" id="section-2">
<div>
<div class="container-darkbg translate" data-speed=".1" id="my-work-text-section">
<h2 class="scroll-into-view">Some of my Work</h2>
<p class="scroll-into-view">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>
@ -151,8 +151,8 @@
<!-- #################################################################################-- About Me Section -->
<section style="z-index:-10;padding-top:500px;">
<div style="perspective:400px;transform-style:preserve-3d;" class="mobile-flip">
<section style="z-index:-10;padding-top:300px;">
<div class="mobile-flip">
<div class="container translate" data-speed="0.04" style="perspective:400px;transform-style:preserve-3d;">
<div class="about-me-img-block scroll-into-view"></div>
</div>