first commit in new environment
This commit is contained in:
BenjaminToby
-1312
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
+326
-139
@@ -1,63 +1,218 @@
|
||||
var faceWrapper = document.getElementById("my-face-wrapper");
|
||||
|
||||
lottie.setQuality("low");
|
||||
|
||||
var myFaceContainer = document.getElementById("my-face");
|
||||
var morphShape1Container = document.getElementById("morph-shape-1");
|
||||
var morphShape2Container = document.getElementById("morph-shape-2");
|
||||
var morphShape3Container = document.getElementById("morph-shape-3");
|
||||
|
||||
var myFace = lottie.loadAnimation({
|
||||
container: myFaceContainer,
|
||||
path: "scripts/face.json",
|
||||
renderer: "svg",
|
||||
loop: false,
|
||||
autoplay: false,
|
||||
});
|
||||
|
||||
var morphShape1 = lottie.loadAnimation({
|
||||
container: morphShape1Container,
|
||||
path: "scripts/morphing-shape-1.json",
|
||||
renderer: "svg",
|
||||
loop: true,
|
||||
autoplay: true,
|
||||
});
|
||||
|
||||
var morphShape2 = lottie.loadAnimation({
|
||||
container: morphShape2Container,
|
||||
path: "scripts/morphing-shape-1.json",
|
||||
renderer: "svg",
|
||||
loop: true,
|
||||
autoplay: true,
|
||||
});
|
||||
|
||||
morphShape1.setSpeed(1.5);
|
||||
|
||||
var morphShape3 = lottie.loadAnimation({
|
||||
container: morphShape3Container,
|
||||
path: "scripts/morphing-shape-1.json",
|
||||
renderer: "svg",
|
||||
loop: true,
|
||||
autoplay: true,
|
||||
});
|
||||
|
||||
morphShape3.setSpeed(2);
|
||||
|
||||
|
||||
|
||||
|
||||
function steadyState() {
|
||||
myFace.playSegments([44, 205], true);
|
||||
myFace.loop = true;
|
||||
|
||||
//############################################# -- 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: "easeOutQuad",
|
||||
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, 0.8],
|
||||
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,
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
var startSteadyState;
|
||||
// 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", () => {
|
||||
myFace.playSegments([0, 50], true);
|
||||
startSteadyState = setTimeout(() => {steadyState();}, 1000);
|
||||
setTimeout(() => {intro();}, 1000);
|
||||
|
||||
});
|
||||
|
||||
|
||||
@@ -66,110 +221,142 @@ window.addEventListener("load", () => {
|
||||
|
||||
|
||||
|
||||
//--------------------------------------------------------------------------- Services mouseover
|
||||
document.querySelectorAll(".hero-content-link").forEach(item => {
|
||||
item.addEventListener("mouseover", () => {
|
||||
|
||||
clearTimeout(startSteadyState);
|
||||
myFace.loop = false;
|
||||
myFace.playSegments([210, 249], true);
|
||||
faceWrapper.style.transform = "rotate3d(20,-20,0,20deg) translateZ(-50px)";
|
||||
document.getElementById("bg-circle").style.transform = "rotate3d(20,-20,0,20deg) translate3d(-50%,-55%,-300px)";
|
||||
myFaceContainer.style.mixBlendMode = "screen";
|
||||
|
||||
});
|
||||
});
|
||||
//############################################# -- Secitons intersection Observer
|
||||
|
||||
document.getElementById("ui-ux-design").addEventListener("mouseover", () => {
|
||||
var sections = document.querySelectorAll(".scroll-into-view");
|
||||
//var sectionContainer = document.querySelector(".my-work-section > div:nth-child(2)");
|
||||
|
||||
var windowRect2 = {
|
||||
rootMargin: "0px 0px -200px 0px",
|
||||
};
|
||||
|
||||
var sectionsIO = new IntersectionObserver(sectionsObserverFn, windowRect2);
|
||||
|
||||
function sectionsObserverFn(entries) {
|
||||
|
||||
setTimeout(() => {document.getElementById("color-overlay").style.backgroundColor = "#A5E6BA";}, 400);
|
||||
});
|
||||
entries.forEach(entry => {
|
||||
if(entry.isIntersecting) {
|
||||
entry.target.classList.add("scrolled-into-view");
|
||||
|
||||
// anime({
|
||||
// targets: contents[entry.target.firstElementChild],
|
||||
// width: [0, "50%"],
|
||||
// easing: "cubicBezier( 0.93, 0, 0.09, 1 )",
|
||||
// opacity: [0, 1],
|
||||
// duration: 1200,
|
||||
// });
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
document.getElementById("web-design").addEventListener("mouseover", () => {
|
||||
setTimeout(() => {document.getElementById("color-overlay").style.backgroundColor = "#5B2A86";}, 400);
|
||||
});
|
||||
|
||||
document.getElementById("frontend-dev").addEventListener("mouseover", () => {
|
||||
setTimeout(() => {document.getElementById("color-overlay").style.backgroundColor = "#7785AC";}, 400);
|
||||
});
|
||||
|
||||
document.getElementById("graphic-design").addEventListener("mouseover", () => {
|
||||
setTimeout(() => {document.getElementById("color-overlay").style.backgroundColor = "#9AC6C5";}, 400);
|
||||
sections.forEach(item => {
|
||||
sectionsIO.observe(item);
|
||||
});
|
||||
|
||||
|
||||
//--------------------------------------------------------------------------- Services mouseout
|
||||
document.querySelectorAll(".hero-content-link").forEach(item => {
|
||||
item.addEventListener("mouseout", () => {
|
||||
|
||||
startSteadyState = setTimeout(() => {
|
||||
|
||||
steadyState();
|
||||
faceWrapper.style.transform = "none";
|
||||
document.getElementById("color-overlay").style.backgroundColor = "transparent";
|
||||
document.getElementById("bg-circle").style.transform = "translate3d(-50%,-55%,-300px)";
|
||||
myFaceContainer.style.mixBlendMode = "normal";
|
||||
|
||||
}, 500);
|
||||
|
||||
});
|
||||
|
||||
//############################################# -- Content intersection Observer
|
||||
|
||||
const contents = document.querySelectorAll(".scroll-into-view-content");
|
||||
|
||||
const contentsIO = new IntersectionObserver(contentsObserverFn, windowRect2);
|
||||
|
||||
function contentsObserverFn(entries) {
|
||||
|
||||
entries.forEach(entry => {
|
||||
if(entry.isIntersecting) {
|
||||
entry.target.classList.add("scrolled-into-view-content");
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
contents.forEach(item => {
|
||||
contentsIO.observe(item);
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
//--------------------------------------------------------------------------- UI UX
|
||||
uiUXLink.addEventListener("mouseover", () => {
|
||||
clearTimeout(startSteadyState);
|
||||
myFace.loop = false;
|
||||
myFace.playSegments([210, 249], true);
|
||||
faceWrapper.style.transform = "rotate3d(20,-20,0,20deg) translateZ(-50px)";
|
||||
|
||||
|
||||
const myToolsIcons = document.querySelectorAll(".my-specialties-section > div > div");
|
||||
const myToolsHeader = document.querySelectorAll(".my-specialties-section h2");
|
||||
const myToolsParagraph = document.querySelector(".my-specialties-section p");
|
||||
|
||||
let myToolsIO = new IntersectionObserver(myToolsFn, windowRect2);
|
||||
|
||||
const myToolsIconsAnimated = anime({
|
||||
targets: myToolsIcons,
|
||||
translateX: [-20, 0],
|
||||
translateY: [-20, 0],
|
||||
// rotateY: [50, 0],
|
||||
opacity: [0, 1],
|
||||
easing: "easeOutQuad",
|
||||
duration: 1200,
|
||||
delay: anime.stagger(150, {start: 200}),
|
||||
loop: false,
|
||||
autoplay: false,
|
||||
complete: function() { myToolsIconsAnimated.remove(myToolsIcons); },
|
||||
});
|
||||
|
||||
uiUXLink.addEventListener("mouseout", () => {
|
||||
startSteadyState = setTimeout(() => {steadyState();}, 500);
|
||||
faceWrapper.style.transform = "none";
|
||||
});
|
||||
function myToolsFn(entries) {
|
||||
|
||||
if(entries[0].isIntersecting) {
|
||||
myToolsIconsAnimated.play();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
myToolsIO.observe(myToolsParagraph);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//############################################# -- Contact Form
|
||||
|
||||
//var form = document.getElementById("my-form");
|
||||
//
|
||||
// async function handleSubmit(event) {
|
||||
// event.preventDefault();
|
||||
// var status = document.getElementById("my-form-status");
|
||||
// var data = new FormData(event.target);
|
||||
// fetch(event.target.action, {
|
||||
// method: form.method,
|
||||
// body: data,
|
||||
// headers: {
|
||||
// 'Accept': 'application/json'
|
||||
// }
|
||||
// }).then(response => {
|
||||
// status.innerHTML = "Thanks for your submission!";
|
||||
// form.reset()
|
||||
// }).catch(error => {
|
||||
// status.innerHTML = "Oops! There was a problem submitting your form"
|
||||
// });
|
||||
// }
|
||||
// form.addEventListener("submit", handleSubmit)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//--------------------------------------------------------------------------- Web Design
|
||||
webDesignLink.addEventListener("mouseover", () => {
|
||||
clearTimeout(startSteadyState);
|
||||
myFace.loop = false;
|
||||
myFace.playSegments([210, 249], true);
|
||||
faceWrapper.style.transform = "rotate3d(20,-20,0,20deg) translateZ(-50px)";
|
||||
});
|
||||
|
||||
webDesignLink.addEventListener("mouseout", () => {
|
||||
startSteadyState = setTimeout(() => {steadyState();}, 500);
|
||||
faceWrapper.style.transform = "none";
|
||||
});
|
||||
|
||||
//--------------------------------------------------------------------------- Frontend Dev
|
||||
frontentDevLink.addEventListener("mouseover", () => {
|
||||
clearTimeout(startSteadyState);
|
||||
myFace.loop = false;
|
||||
myFace.playSegments([210, 249], true);
|
||||
faceWrapper.style.transform = "rotate3d(20,-20,0,20deg) translateZ(-50px)";
|
||||
});
|
||||
|
||||
frontentDevLink.addEventListener("mouseout", () => {
|
||||
startSteadyState = setTimeout(() => {steadyState();}, 500);
|
||||
faceWrapper.style.transform = "none";
|
||||
});
|
||||
|
||||
//--------------------------------------------------------------------------- Graphic and Animation Design
|
||||
graphicDesignLink.addEventListener("mouseover", () => {
|
||||
clearTimeout(startSteadyState);
|
||||
myFace.loop = false;
|
||||
myFace.playSegments([210, 249], true);
|
||||
faceWrapper.style.transform = "rotate3d(20,-20,0,20deg) translateZ(-50px)";
|
||||
});
|
||||
|
||||
graphicDesignLink.addEventListener("mouseout", () => {
|
||||
startSteadyState = setTimeout(() => {steadyState();}, 500);
|
||||
faceWrapper.style.transform = "none";
|
||||
});
|
||||
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
{"v":"5.7.6","fr":30,"ip":0,"op":362,"w":200,"h":200,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[108,101.75,0],"ix":2,"l":2},"a":{"a":0,"k":[8,1.75,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.51,"y":1},"o":{"x":0.506,"y":0},"t":0,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-64.5,-75],[-11,85],[24.5,-17.5]],"c":true}]},{"i":{"x":0.438,"y":1},"o":{"x":0.53,"y":0},"t":121,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-16.5,-48.5],[-86.5,87.5],[87,-85]],"c":true}]},{"i":{"x":0.432,"y":1},"o":{"x":0.475,"y":0},"t":240,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[79,25.5],[-8,-32],[-85.5,85]],"c":true}]},{"t":361,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-64.5,-75],[-11,85],[24.5,-17.5]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":364,"st":0,"bm":0}],"markers":[]}
|
||||
-230
@@ -1,230 +0,0 @@
|
||||
|
||||
|
||||
|
||||
|
||||
const translate = document.querySelectorAll(".translate");
|
||||
var watermark = document.querySelector(".hero-watermark");
|
||||
//var skewedBg = document.querySelector(".skewed-bg");
|
||||
|
||||
|
||||
|
||||
window.addEventListener("scroll", () => {
|
||||
|
||||
var scroll = window.pageYOffset;
|
||||
|
||||
translate.forEach(element => {
|
||||
let speed = element.dataset.speed;
|
||||
element.style.transform = "translateY(" + (scroll * speed) + "px)";
|
||||
});
|
||||
|
||||
if(window.innerWidth < 500) {
|
||||
|
||||
translate[0].style.transform = "translateY(" + (scroll * 0.1) + "px)";
|
||||
}
|
||||
|
||||
// skewedBg.style.transform = "translateY(" + (scroll * skewedBg.dataset.speed) + "px) skewY(-3deg)";
|
||||
watermark.style.transform = "translateY(" + (scroll * watermark.dataset.speed) + "px) translateX(-50%)";
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
window.addEventListener("load", () => {
|
||||
document.getElementById("skewed-bg-block").classList.add("skewed-bg");
|
||||
document.getElementById("preloader").className = "preloader";
|
||||
document.getElementById("hero-graphic-container").className = "hero-graphic-wrapper";
|
||||
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");
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//##########################################################################################################
|
||||
|
||||
var targets = document.querySelectorAll(".menu-color-change");
|
||||
var windowRect = {
|
||||
rootMargin: "0px 0px -400px 0px",
|
||||
// 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);
|
||||
|
||||
function navColorFunction(entries, navColors) {
|
||||
|
||||
entries.forEach(entry => {
|
||||
if(entry.isIntersecting) {
|
||||
document.querySelector("header").style.color = "white";
|
||||
// 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-controller").style.opacity = "1";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
targets.forEach(entry => {
|
||||
navColors.observe(entry);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
//##########################################################################################################
|
||||
|
||||
var scrollIntoViewItems = document.querySelectorAll(".scroll-into-view");
|
||||
|
||||
var windowRect2 = {
|
||||
rootMargin: "0px 0px -200px 0px",
|
||||
};
|
||||
var scrollIntoView = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(entry => {
|
||||
if(entry.isIntersecting) {
|
||||
entry.target.classList.add("fade-in-bottom");
|
||||
}
|
||||
});
|
||||
}, windowRect2);
|
||||
|
||||
|
||||
scrollIntoViewItems.forEach(item => {
|
||||
scrollIntoView.observe(item);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//##########################################################################################################
|
||||
|
||||
//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.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[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[3].dataset.speed = 0.1;
|
||||
|
||||
} else {
|
||||
translate[3].dataset.speed = 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
sectionOneIo.observe(translate[3]);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//############################################################################## -- Hamburger
|
||||
|
||||
document.querySelector(".hamburger-wrapper").addEventListener("click", hamburgerMenuToggle);
|
||||
var logo = document.querySelector("header > a");
|
||||
|
||||
let hc = 0;
|
||||
|
||||
function hamburgerMenuToggle() {
|
||||
if (hc == 0) {
|
||||
document.querySelector("nav").className = "nav-mobile";
|
||||
document.querySelector("#aside-heder-block").className = "aside-header-mobile";
|
||||
logo.style.color = "#222";
|
||||
document.querySelector(".aside-header-mobile > a:first-child").style.color = "#222";
|
||||
} else {
|
||||
document.querySelector("nav").className = "none";
|
||||
document.querySelector("#aside-heder-block").className = "aside-header";
|
||||
logo.style.color = "inherit";
|
||||
hc = -1;
|
||||
}
|
||||
hc++;
|
||||
}
|
||||
|
||||
|
||||
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;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
document.querySelector(".hamburger-wrapper").onblur = () => {
|
||||
document.querySelector("nav").className = "none";
|
||||
document.querySelector("#aside-heder-block").className = "aside-header";
|
||||
logo.style.color = "inherit";
|
||||
hc = 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
-368
@@ -1,368 +0,0 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//############################################# -- 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: "easeOutQuad",
|
||||
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, 0.8],
|
||||
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
|
||||
|
||||
var sections = document.querySelectorAll(".scroll-into-view");
|
||||
//var sectionContainer = document.querySelector(".my-work-section > div:nth-child(2)");
|
||||
|
||||
var windowRect2 = {
|
||||
rootMargin: "0px 0px -200px 0px",
|
||||
};
|
||||
|
||||
var sectionsIO = new IntersectionObserver(sectionsObserverFn, windowRect2);
|
||||
|
||||
function sectionsObserverFn(entries) {
|
||||
|
||||
entries.forEach(entry => {
|
||||
if(entry.isIntersecting) {
|
||||
entry.target.classList.add("scrolled-into-view");
|
||||
|
||||
// anime({
|
||||
// targets: contents[entry.target.firstElementChild],
|
||||
// width: [0, "50%"],
|
||||
// easing: "cubicBezier( 0.93, 0, 0.09, 1 )",
|
||||
// opacity: [0, 1],
|
||||
// duration: 1200,
|
||||
// });
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
sections.forEach(item => {
|
||||
sectionsIO.observe(item);
|
||||
});
|
||||
|
||||
|
||||
|
||||
//############################################# -- Content intersection Observer
|
||||
|
||||
const contents = document.querySelectorAll(".scroll-into-view-content");
|
||||
|
||||
const contentsIO = new IntersectionObserver(contentsObserverFn, windowRect2);
|
||||
|
||||
function contentsObserverFn(entries) {
|
||||
|
||||
entries.forEach(entry => {
|
||||
if(entry.isIntersecting) {
|
||||
entry.target.classList.add("scrolled-into-view-content");
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
contents.forEach(item => {
|
||||
contentsIO.observe(item);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
const myToolsIcons = document.querySelectorAll(".my-specialties-section > div > div");
|
||||
const myToolsHeader = document.querySelectorAll(".my-specialties-section h2");
|
||||
const myToolsParagraph = document.querySelector(".my-specialties-section p");
|
||||
|
||||
let myToolsIO = new IntersectionObserver(myToolsFn, windowRect2);
|
||||
|
||||
const myToolsIconsAnimated = anime({
|
||||
targets: myToolsIcons,
|
||||
translateX: [-20, 0],
|
||||
translateY: [-20, 0],
|
||||
// rotateY: [50, 0],
|
||||
opacity: [0, 1],
|
||||
easing: "easeOutQuad",
|
||||
duration: 1200,
|
||||
delay: anime.stagger(150, {start: 200}),
|
||||
loop: false,
|
||||
autoplay: false,
|
||||
complete: function() { myToolsIconsAnimated.remove(myToolsIcons); },
|
||||
});
|
||||
|
||||
function myToolsFn(entries) {
|
||||
|
||||
if(entries[0].isIntersecting) {
|
||||
myToolsIconsAnimated.play();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
myToolsIO.observe(myToolsParagraph);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//############################################# -- Contact Form
|
||||
|
||||
//var form = document.getElementById("my-form");
|
||||
//
|
||||
// async function handleSubmit(event) {
|
||||
// event.preventDefault();
|
||||
// var status = document.getElementById("my-form-status");
|
||||
// var data = new FormData(event.target);
|
||||
// fetch(event.target.action, {
|
||||
// method: form.method,
|
||||
// body: data,
|
||||
// headers: {
|
||||
// 'Accept': 'application/json'
|
||||
// }
|
||||
// }).then(response => {
|
||||
// status.innerHTML = "Thanks for your submission!";
|
||||
// form.reset()
|
||||
// }).catch(error => {
|
||||
// status.innerHTML = "Oops! There was a problem submitting your form"
|
||||
// });
|
||||
// }
|
||||
// form.addEventListener("submit", handleSubmit)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
{"v":"5.7.6","fr":30,"ip":0,"op":182,"w":1440,"h":300,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[732,83.933,0],"ix":2,"l":2},"a":{"a":0,"k":[12,173.933,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.406,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[{"i":[[0,0],[-220.336,0],[-276.265,-22.751],[0,0]],"o":[[0,0],[278,0],[340,28],[0,0]],"v":[[-740,270],[-352,208],[320,280],[762,220]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.497,"y":0},"t":90,"s":[{"i":[[0,0],[-220.28,-4.969],[-254.604,-13.3],[0,0]],"o":[[0,0],[266,6],[268,14],[0,0]],"v":[[-780,216],[-334,268],[348,228],[776,284]],"c":false}]},{"t":182,"s":[{"i":[[0,0],[-220.336,0],[-276.265,-22.751],[0,0]],"o":[[0,0],[278,0],[340,28],[0,0]],"v":[[-740,270],[-352,208],[320,280],[762,220]],"c":false}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":182,"st":0,"bm":0}],"markers":[]}
|
||||
Reference in New Issue
Block a user