2021-06-04 06:56:31 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const translate = document.querySelectorAll(".translate");
|
|
|
|
var watermark = document.querySelector(".hero-watermark");
|
2021-06-04 20:11:31 +00:00
|
|
|
//var skewedBg = document.querySelector(".skewed-bg");
|
2021-06-04 06:56:31 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
window.addEventListener("scroll", () => {
|
|
|
|
|
|
|
|
var scroll = window.pageYOffset;
|
2021-06-04 20:11:31 +00:00
|
|
|
|
2021-06-04 06:56:31 +00:00
|
|
|
translate.forEach(element => {
|
|
|
|
let speed = element.dataset.speed;
|
|
|
|
element.style.transform = "translateY(" + (scroll * speed) + "px)";
|
|
|
|
});
|
|
|
|
|
2021-06-06 16:10:42 +00:00
|
|
|
if(window.innerWidth < 500) {
|
|
|
|
|
|
|
|
translate[0].style.transform = "translateY(" + (scroll * 0.1) + "px)";
|
|
|
|
}
|
|
|
|
|
2021-06-04 20:11:31 +00:00
|
|
|
// skewedBg.style.transform = "translateY(" + (scroll * skewedBg.dataset.speed) + "px) skewY(-3deg)";
|
|
|
|
watermark.style.transform = "translateY(" + (scroll * watermark.dataset.speed) + "px) translateX(-50%)";
|
|
|
|
|
2021-06-05 15:11:16 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
//window.scrollBy({
|
|
|
|
// top: -100,
|
|
|
|
// behavior: "smooth"
|
|
|
|
//});
|
|
|
|
|
|
|
|
window.addEventListener("load", () => {
|
2021-06-06 16:10:42 +00:00
|
|
|
document.getElementById("skewed-bg-block").classList.add("skewed-bg");
|
2021-06-05 15:11:16 +00:00
|
|
|
document.getElementById("preloader").className = "preloader";
|
2021-06-06 09:29:14 +00:00
|
|
|
document.getElementById("hero-graphic-container").className = "hero-graphic-wrapper";
|
2021-06-06 16:10:42 +00:00
|
|
|
document.getElementById("hero-text-controller").className = "hero-text-block";
|
|
|
|
document.querySelector(".hero-text-wrapper > a").classList.add("scroll-into-view-intro-2");
|
|
|
|
document.querySelector(".hero-watermark").classList.add("scroll-into-view-intro-2");
|
2021-06-06 09:29:14 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//##########################################################################################################
|
|
|
|
|
2021-06-06 16:10:42 +00:00
|
|
|
var targets = document.querySelectorAll(".menu-color-change");
|
2021-06-06 09:29:14 +00:00
|
|
|
var windowRect = {
|
|
|
|
rootMargin: "0px 0px -400px 0px",
|
|
|
|
delay: 100,
|
|
|
|
trackVisibility: true,
|
|
|
|
};
|
|
|
|
|
|
|
|
var navColors = new IntersectionObserver(navColorFunction, windowRect);
|
|
|
|
|
|
|
|
function navColorFunction(entries, navColors) {
|
|
|
|
|
|
|
|
entries.forEach(entry => {
|
|
|
|
if(entry.isIntersecting) {
|
|
|
|
document.querySelector("header").style.color = "white";
|
|
|
|
document.querySelector(".hero-graphic-wrapper").style.opacity = "0";
|
2021-06-06 16:10:42 +00:00
|
|
|
document.querySelector(".aside-header > a").style.color = "white";
|
2021-06-06 09:29:14 +00:00
|
|
|
// translate[3].dataset.speed = .2;
|
|
|
|
} else {
|
|
|
|
document.querySelector("header").style.color = "#222";
|
2021-06-06 16:10:42 +00:00
|
|
|
document.querySelector(".aside-header > a").style.color = "#222";
|
2021-06-06 09:29:14 +00:00
|
|
|
document.querySelector(".hero-graphic-wrapper").style.opacity = "1";
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2021-06-06 16:10:42 +00:00
|
|
|
targets.forEach(entry => {
|
|
|
|
navColors.observe(entry);
|
|
|
|
});
|
|
|
|
|
|
|
|
|
2021-06-06 09:29:14 +00:00
|
|
|
|
|
|
|
|
|
|
|
//##########################################################################################################
|
|
|
|
|
|
|
|
var scrollIntoViewItems = document.querySelectorAll(".scroll-into-view");
|
|
|
|
|
|
|
|
var windowRect2 = {
|
|
|
|
rootMargin: "0px 0px -200px 0px",
|
|
|
|
};
|
|
|
|
var scrollIntoView = new IntersectionObserver(function(entries, scrollIntoView) {
|
|
|
|
entries.forEach(entry => {
|
|
|
|
if(entry.isIntersecting) {
|
|
|
|
entry.target.classList.add("fade-in-bottom");
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}, windowRect2);
|
|
|
|
|
|
|
|
|
|
|
|
scrollIntoViewItems.forEach(item => {
|
|
|
|
scrollIntoView.observe(item);
|
|
|
|
});
|
|
|
|
|
|
|
|
|
2021-06-06 16:10:42 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2021-06-06 09:29:14 +00:00
|
|
|
//##########################################################################################################
|
|
|
|
|
|
|
|
//var sectionOneText = document.querySelector("#section-2");
|
|
|
|
|
|
|
|
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;
|
|
|
|
// }
|
2021-06-06 16:10:42 +00:00
|
|
|
|
|
|
|
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 )";
|
|
|
|
}
|
|
|
|
|
2021-06-06 09:29:14 +00:00
|
|
|
} else {
|
2021-06-06 16:10:42 +00:00
|
|
|
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);
|
|
|
|
}
|
2021-06-06 09:29:14 +00:00
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
sectionOneIo.observe(translate[4]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2021-06-06 16:10:42 +00:00
|
|
|
|
|
|
|
//############################################################################## -- Hamburger
|
|
|
|
|
|
|
|
document.querySelector(".hamburger-wrapper").addEventListener("click", hamburgerMenuToggle);
|
2021-06-07 06:08:45 +00:00
|
|
|
var logo = document.querySelector("header > a");
|
2021-06-06 16:10:42 +00:00
|
|
|
|
|
|
|
let hc = 0;
|
|
|
|
|
|
|
|
function hamburgerMenuToggle() {
|
|
|
|
if (hc == 0) {
|
|
|
|
document.querySelector("nav").className = "nav-mobile";
|
|
|
|
document.querySelector("#aside-heder-block").className = "aside-header-mobile";
|
2021-06-07 06:08:45 +00:00
|
|
|
logo.style.color = "#222";
|
|
|
|
document.querySelector(".aside-header-mobile > a:first-child").style.color = "#222";
|
2021-06-06 16:10:42 +00:00
|
|
|
} else {
|
|
|
|
document.querySelector("nav").className = "none";
|
|
|
|
document.querySelector("#aside-heder-block").className = "aside-header";
|
2021-06-07 06:08:45 +00:00
|
|
|
logo.style.color = "inherit";
|
2021-06-06 16:10:42 +00:00
|
|
|
hc = -1;
|
|
|
|
}
|
|
|
|
hc++;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
window.addEventListener("resize", () => {
|
2021-06-07 06:08:45 +00:00
|
|
|
if(window.innerWidth > 1200) {
|
2021-06-06 16:10:42 +00:00
|
|
|
document.querySelector("nav").className = "none";
|
|
|
|
document.querySelector("#aside-heder-block").className = "aside-header";
|
|
|
|
hc = 0;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2021-06-07 04:57:50 +00:00
|
|
|
|
|
|
|
document.querySelector(".hamburger-wrapper").onblur = () => {
|
|
|
|
document.querySelector("nav").className = "none";
|
|
|
|
document.querySelector("#aside-heder-block").className = "aside-header";
|
|
|
|
hc = 0;
|
|
|
|
}
|
2021-06-06 16:10:42 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|