More mobile fixes
This commit is contained in:
parent
13c0f9e58a
commit
87d3205297
@ -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(window.innerWidth > 800) {
|
||||
translate[4].dataset.speed = .2;
|
||||
translate[4].style.transition = "all 1.8s cubic-bezier( 0.39, 0.575, 0.565, 1 )";
|
||||
}
|
||||
if(entries[0].isIntersecting) {
|
||||
|
||||
if(window.innerWidth > 800) {
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
|
35
v2.css
35
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 {
|
||||
|
18
v2.html
18
v2.html
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user