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

78
scripts/v2.js
View File

@ -27,10 +27,8 @@ window.addEventListener("scroll", () => {
}); });
//window.scrollBy({
// top: -100,
// behavior: "smooth"
//});
window.addEventListener("load", () => { window.addEventListener("load", () => {
document.getElementById("skewed-bg-block").classList.add("skewed-bg"); document.getElementById("skewed-bg-block").classList.add("skewed-bg");
@ -52,8 +50,10 @@ window.addEventListener("load", () => {
var targets = document.querySelectorAll(".menu-color-change"); var targets = document.querySelectorAll(".menu-color-change");
var windowRect = { var windowRect = {
rootMargin: "0px 0px -400px 0px", rootMargin: "0px 0px -400px 0px",
delay: 100, // delay: 100,
trackVisibility: true, // 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); var navColors = new IntersectionObserver(navColorFunction, windowRect);
@ -63,13 +63,13 @@ function navColorFunction(entries, navColors) {
entries.forEach(entry => { entries.forEach(entry => {
if(entry.isIntersecting) { if(entry.isIntersecting) {
document.querySelector("header").style.color = "white"; 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"; document.querySelector(".aside-header > a").style.color = "white";
// translate[3].dataset.speed = .2; // translate[3].dataset.speed = .2;
} else { } else {
document.querySelector("header").style.color = "#222"; document.querySelector("header").style.color = "#222";
document.querySelector(".aside-header > a").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) { function sect1Function(entries, sectionOneIo) {
entries.forEach(entry => { // entries.forEach(entry => {
if(entry.isIntersecting) { // if(entry.isIntersecting) {
// windowRect.thresholds = [0, 0.25, 0.5, 0.75, 1]; //// windowRect.thresholds = [0, 0.25, 0.5, 0.75, 1];
// if (windowRect.thresholds < 0.25) { //// if (windowRect.thresholds == 0.5) {
// translate[3].dataset.speed = .1; //// translate[4].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) { // if(window.innerWidth > 800) {
// translate[3].dataset.speed = .3; //
//// 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 {
translate[3].dataset.speed = 0;
} }
} else { } else {
if(window.innerWidth > 800) { 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; translate[3].dataset.speed = 0.1;
setTimeout(()=> {translate[4].style.transition = "all .8s cubic-bezier( 0.39, 0.575, 0.565, 1 )";}, 1000);
} 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) { if(window.innerWidth > 1200) {
document.querySelector("nav").className = "none"; document.querySelector("nav").className = "none";
document.querySelector("#aside-heder-block").className = "aside-header"; document.querySelector("#aside-heder-block").className = "aside-header";
logo.style.color = "inherit";
hc = 0; hc = 0;
} }
}); });
@ -187,6 +216,7 @@ window.addEventListener("resize", () => {
document.querySelector(".hamburger-wrapper").onblur = () => { document.querySelector(".hamburger-wrapper").onblur = () => {
document.querySelector("nav").className = "none"; document.querySelector("nav").className = "none";
document.querySelector("#aside-heder-block").className = "aside-header"; document.querySelector("#aside-heder-block").className = "aside-header";
logo.style.color = "inherit";
hc = 0; hc = 0;
} }

35
v2.css
View File

@ -83,12 +83,15 @@ section {
padding: 60px 40px; padding: 60px 40px;
position: relative; position: relative;
width: 100%; width: 100%;
perspective: 500px;
} }
section > div { section > div {
width: 960px; width: 960px;
display: flex; display: flex;
justify-content: center; justify-content: center;
perspective: 500px;
transform-style: preserve-3d;
} }
section > div > div{ section > div > div{
@ -411,7 +414,7 @@ input:focus {
/* ################################################### Body*/ /* ################################################### Body*/
.hero-section { .hero-section {
z-index: 1;
} }
.hero-graphic-wrapper-init { .hero-graphic-wrapper-init {
@ -424,6 +427,12 @@ input:focus {
opacity: 0; opacity: 0;
} }
/*
#hero-graphic-container {
opacity: 0;
}
*/
.hero-graphic-wrapper { .hero-graphic-wrapper {
width: 400px; width: 400px;
height: 600px; height: 600px;
@ -601,7 +610,7 @@ input:focus {
.skewed-bg { .skewed-bg {
position: absolute; position: absolute;
width: 100% !important; width: 100%;
height: 400px; height: 400px;
transform: skewY(-3deg); transform: skewY(-3deg);
background-color: var(--main-color); background-color: var(--main-color);
@ -611,6 +620,8 @@ input:focus {
animation-fill-mode: both; animation-fill-mode: both;
animation-delay: 1s; animation-delay: 1s;
animation-timing-function: cubic-bezier( 0.39, 0.575, 0.565, 1 ); animation-timing-function: cubic-bezier( 0.39, 0.575, 0.565, 1 );
perspective: none;
transform-style: flat;
} }
@keyframes skewintro { @keyframes skewintro {
@ -618,6 +629,11 @@ input:focus {
100%{transform: skewY(-3deg); top: -200px; width: 100%;} 100%{transform: skewY(-3deg); top: -200px; width: 100%;}
} }
#my-work-text-section {
perspective: 500px;
transform-style: preserve-3d;
}
.container { .container {
color: #222; color: #222;
display: flex; display: flex;
@ -996,7 +1012,7 @@ input:focus {
margin-right: none; margin-right: none;
margin-left: -20px; margin-left: -20px;
margin-top: 50px; margin-top: 50px;
margin-bottom: 50px; margin-bottom: 100px;
} }
#benjamin-hero-text { #benjamin-hero-text {
@ -1021,6 +1037,7 @@ input:focus {
padding-top: 40px; padding-top: 40px;
margin-left: 40px; margin-left: 40px;
min-width: 250px; min-width: 250px;
max-height: 300px;
} }
.scroll-down-link-block { .scroll-down-link-block {
@ -1066,14 +1083,14 @@ input:focus {
} }
.below-fold { .below-fold {
padding-top: 250px; padding-top: 150px;
padding-bottom: 100px; padding-bottom: 100px;
margin: 0; margin: 0;
} }
.skewed-bg { .skewed-bg {
height: 200px; height: 200px;
margin-top: 150px; margin-top: 130px;
top: 0; top: 0;
} }
@ -1272,13 +1289,13 @@ input:focus {
} }
.below-fold { .below-fold {
padding-top: 20px; padding-top: 100px;
padding-bottom: 100px; padding-bottom: 100px;
} }
.skewed-bg { .skewed-bg {
height: 400px; height: 400px;
margin-top: -70px; margin-top: -50px;
} }
.section-watermark { .section-watermark {
@ -1376,14 +1393,14 @@ input:focus {
} }
.below-fold { .below-fold {
padding-top: 40px; padding-top: 100px;
padding-bottom: 100px; padding-bottom: 100px;
margin: 0; margin: 0;
} }
.skewed-bg { .skewed-bg {
height: 400px; height: 400px;
margin-top: 0px; margin-top: -60px;
} }
.section-watermark { .section-watermark {

18
v2.html
View File

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