personal-site/scripts/v3.js
2021-06-09 12:39:27 +01:00

267 lines
5.2 KiB
JavaScript

//############################################# -- Intro Animations
const heroTextSection = document.querySelector(".hero-section > div:nth-child(2)");
const myImageBlock = document.querySelector(".benjamin-image-block");
const myBigTextBlock = document.querySelector(".benjamin-big-text-block");
const mainTextBlock = document.querySelector(".main-text-block");
const mainCTA = document.querySelector(".main-cta-button");
const allHeaderElements = document.querySelectorAll("header *");
const mountains = document.querySelectorAll("#mountains");
const clouds = document.querySelectorAll("#clouds");
function intro() {
anime({
targets: heroTextSection,
width: [0, "50%"],
translateX: [200, 0],
easing: "cubicBezier( 0.93, 0, 0.09, 1 )",
duration: 1500,
delay: 1000,
});
anime({
targets: allHeaderElements,
translateX: [-20, 0],
// rotateY: [50, 0],
opacity: [0, 1],
easing: "easeInOutQuad",
duration: 800,
delay: anime.stagger(100, {start: 1000}/* , {easing: 'easeOutQuad'} */),
});
anime({
targets: myBigTextBlock,
translateY: [100, 0],
opacity: [0, 1],
easing: "cubicBezier( 0.1, 0.63, 0.355, 1 )",
duration: 1200,
delay: 2000,
});
anime({
targets: myImageBlock,
translateY: [100, 0],
opacity: [0, 1],
easing: "cubicBezier( 0.1, 0.63, 0.355, 1 )",
duration: 1500,
delay: 2200,
});
anime({
targets: mainTextBlock,
translateX: [-50, 0],
opacity: [0, 1],
easing: "cubicBezier( 0.1, 0.63, 0.355, 1 )",
duration: 1200,
delay: 2500,
});
anime({
targets: mainCTA,
translateX: [-50, 0],
opacity: [0, 1],
easing: "cubicBezier( 0.1, 0.63, 0.355, 1 )",
duration: 1200,
delay: 2600,
});
anime({
targets: mountains,
translateY: [200, 0],
opacity: [0, 1],
easing: "cubicBezier(0.1, 0.63, 0.355, 1)",
duration: 1500,
delay: 1000,
});
anime({
targets: clouds,
opacity: [0.2, 1],
easing: "easeOutQuad",
duration: 1200,
delay: 800,
});
}
// Intro Initialization
function introInit() {
anime({
targets: heroTextSection,
width: [0],
translateX: 200,
duration: 0
});
anime({
targets: allHeaderElements,
translateX: [-20],
opacity: [0],
duration: 0
});
anime({
targets: myBigTextBlock,
translateY: [100],
opacity: [0],
duration: 0
});
anime({
targets: myImageBlock,
translateY: [100],
opacity: [0],
duration: 0
});
anime({
targets: mainTextBlock,
translateX: [-50],
opacity: [0],
duration: 0
});
anime({
targets: mainCTA,
translateX: [-50],
opacity: [0],
duration: 0
});
anime({
targets: mountains,
opacity: 0,
duration: 0
});
}
introInit();
//############################################# -- Header Scroll interactions
var headerController = document.querySelector("#header-controller");
var windowRect = {
rootMargin: "0px",
};
var headerObserver = new IntersectionObserver(changeHeader, windowRect);
function changeHeader(entry) {
if(entry[0].isIntersecting) {
document.querySelector("header").className = "none";
anime({
targets: "header img",
width: 40,
height: 100,
top: 0,
duration: 400,
easing: "easeOutCubic",
});
anime({
targets: "header > a > div",
translateX: 0,
opacity: 1,
duration: 1000,
});
} else {
document.querySelector("header").classList.add("scrolled");
anime({
targets: "header img",
width: 60,
height: 130,
top: 20,
duration: 400,
easing: "easeOutCubic",
});
anime({
targets: "header > a > div",
translateX: -50,
opacity: 0,
duration: 1000,
});
}
}
//############################################# -- Window Load
setTimeout(() => {
headerObserver.observe(headerController);
}, 3000);
window.addEventListener("load", () => {
setTimeout(() => {intro();}, 1000);
});
//############################################# -- Secitons intersection Observer
const sections = document.querySelectorAll("section");
var sectionContainer = document.querySelector("#samp-div");
var windowRect2 = {
rootMargin: "0px",
};
var sectionsIntersectionObserver = new IntersectionObserver(sectionsObserverFn, windowRect);
function sectionsObserverFn(entries) {
if(entries[1].isInersecting) {
anime({
targets: sectionContainer,
width: [0, 500],
delay: 1000,
});
}
}
sections.forEach(entry => {
sectionsIntersectionObserver.observe(entry);
});