From dc90669a828264e418898161b6257370097a0c14 Mon Sep 17 00:00:00 2001 From: vickkie Date: Wed, 27 Mar 2024 16:42:29 +0300 Subject: [PATCH] split?why --- index.html | 7 +++---- js/distort/index.js | 5 +---- js/main.js | 15 --------------- js/{index.js => menu.js} | 3 +-- js/works/index.js | 11 +++++++++++ js/works/item.js | 10 ++-------- public/bundle.js | 2 +- public/index.html | 2 +- public/js/distort/index.js | 2 +- public/js/main.js | 2 +- public/js/{index.js => menu.js} | 0 public/js/works/index.js | 2 +- 12 files changed, 23 insertions(+), 38 deletions(-) rename js/{index.js => menu.js} (98%) rename public/js/{index.js => menu.js} (100%) diff --git a/index.html b/index.html index 5ecf9c2..d63f777 100755 --- a/index.html +++ b/index.html @@ -1638,18 +1638,17 @@

- - + - - + + diff --git a/js/distort/index.js b/js/distort/index.js index cc35f32..5783fc8 100755 --- a/js/distort/index.js +++ b/js/distort/index.js @@ -1,12 +1,9 @@ import { Cursor } from "./cursor.js"; import { MenuItem } from "./menuItem.js"; -// initialize Splitting -const splitting = Splitting(); - gsap.registerPlugin(SplitText); document.addEventListener("DOMContentLoaded", () => { - const splitchars = document.querySelectorAll(".split-char-title"); + const splitchars = document.querySelectorAll(".split-char"); splitchars.forEach((splitchar) => { new SplitText(splitchar, { diff --git a/js/main.js b/js/main.js index 937c295..a109b3b 100755 --- a/js/main.js +++ b/js/main.js @@ -16,21 +16,6 @@ if ("serviceWorker" in navigator) { }); } -// // Call the split text to transform the splittext gsap texts to spans of chars - -gsap.registerPlugin(SplitText); - -document.addEventListener("DOMContentLoaded", () => { - const splitchars = selectAll(".split-char"); - - splitchars.forEach((splitchar) => { - new SplitText(splitchar, { - type: "chars", - charsClass: "char", - }); - }); -}); - //Group 1; code to update time document.addEventListener("DOMContentLoaded", function () { setTimeout(() => { diff --git a/js/index.js b/js/menu.js similarity index 98% rename from js/index.js rename to js/menu.js index 9a91edc..2753983 100755 --- a/js/index.js +++ b/js/menu.js @@ -1,7 +1,6 @@ import { preloadImages } from "./utils.js"; -// preload images then remove loader (loading class) -preloadImages(".tiles__line-img").then(() => document.body.classList.remove("loading")); +preloadImages(".tiles__line-img").then(() => document.body.classList.remove("loading")); // frame element const frame = document.querySelector(".frame"); diff --git a/js/works/index.js b/js/works/index.js index 2a02e43..54abc81 100755 --- a/js/works/index.js +++ b/js/works/index.js @@ -1,6 +1,17 @@ import { preloadImages, abibae } from "./utils.js"; import { Item } from "./item.js"; +document.addEventListener("DOMContentLoaded", () => { + const splitchars = document.querySelectorAll(".split-char-title"); + + splitchars.forEach((splitchar) => { + new SplitText(splitchar, { + type: "chars", + charsClass: "char", + }); + }); +}); + // Preload images and fonts Promise.all([preloadImages(".item__img, .content__img")]).then(() => { abibae(); diff --git a/js/works/item.js b/js/works/item.js index 07722e2..0c42077 100755 --- a/js/works/item.js +++ b/js/works/item.js @@ -1,13 +1,5 @@ -// import { gsap } from './gsap.min.js'; import { MagneticFx } from "./magneticFx.js"; import { calcWinsize, wrapElements } from "./utils.js"; -// import { wrap } from 'gsap/gsap-core'; - -// import "splitting/dist/splitting.css"; -// import "splitting/dist/splitting-cells.css"; -// import Splitting from "splitting"; - -// initialize Splitting Splitting(); @@ -65,7 +57,9 @@ export class Item { } editHeadingLayout() { this.DOM.heading = this.DOM.el.querySelector(".heading--item"); + this.DOM.itemHeadingChars = [...this.DOM.heading.querySelectorAll(".char")]; + wrapElements(this.DOM.itemHeadingChars, "span", "char-wrap"); } editContentLayout() { diff --git a/public/bundle.js b/public/bundle.js index 3cec8b7..2cbbdfd 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -1,2 +1,2 @@ /*! For license information please see bundle.js.LICENSE.txt */ -(()=>{let e=e=>document.querySelector(e),t=e=>document.querySelectorAll(e);"serviceWorker"in navigator&&window.addEventListener("load",(()=>{navigator.serviceWorker.register("./offline-uzitrake.js").catch((e=>console.log("Error:",e)))})),gsap.registerPlugin(SplitText),document.addEventListener("DOMContentLoaded",(()=>{t(".split-char").forEach((e=>{new SplitText(e,{type:"chars",charsClass:"char"})}))})),document.addEventListener("DOMContentLoaded",(function(){setTimeout((()=>{let o=e(".time");function r(){var e=new Date;o.innerHTML=e.toTimeString().substr(0,5)}r(),setInterval((()=>{r()}),1e3);let n=e(".button-menu"),i=e(".button-close"),a=t(".menu-will-open"),s=e(".mf-cursor");function l(){if(innerWidth>767){const e=new Lenis({duration:3,easing:e=>Math.min(1,1.001-Math.pow(2,-10*e)),direction:"vertical",gestureDirection:"vertical",smooth:!0,smoothTouch:!1,touchMultiplier:2,infinite:!1,autoResize:!0});requestAnimationFrame((function t(o){e.raf(o),requestAnimationFrame(t)}))}}if(a.forEach((e=>{n.addEventListener("click",(()=>{setTimeout((()=>{e.classList.add("menu-is-open"),s&&(s.style.display="none")}),1e3)})),i.addEventListener("click",(()=>{setTimeout((()=>{e.classList.remove("menu-is-open"),s&&(s.style.display="block")}),1e3)}))})),l(),window.addEventListener("resize",l),gsap.registerPlugin(ScrollTrigger),innerWidth>767){t("[line-triggerX]").forEach((function(e){const t=e.getAttribute("line-triggerX"),o=function(e){const t=gsap.timeline({defaults:{duration:2,ease:"power2.out"}});return t.fromTo(e,{scaleX:1,opacity:1,transformOrigin:"center center"},{scaleX:0,opacity:0}),t}(e);ScrollTrigger.create({trigger:t,start:"top 80%",animation:o,onEnter:()=>o.play()})})),t("[line-triggerY]").forEach((function(e){const t=e.getAttribute("line-triggerY"),o=function(e){const t=gsap.timeline({defaults:{duration:2,ease:"power2.out",delay:1.2}});return t.fromTo(e,{scaleY:1,opacity:1,transformOrigin:"bottom"},{scaleY:0,opacity:0}),t}(e);ScrollTrigger.create({trigger:t,start:"top 80%",animation:o,toggleActions:"play none none none"})}))}if(innerWidth>767){function c(){gsap.registerPlugin(ScrollTrigger),gsap.timeline({scrollTrigger:{trigger:".empty",start:"top bottom",end:"bottom 60%",scrub:!0}}).to(".empty",{y:"-40vh",ease:"expo.out"})}c(),window.addEventListener("resize",c)}const g=[...t("[data-effect28]")];if(g){gsap.registerPlugin(ScrollTrigger),gsap.registerPlugin(SplitText);new SplitText("[data-effect28]",{type:"words,lines,chars",wordsClass:"content__title word",charsClass:"char",linesClass:"lines"});g.forEach((e=>{const t=[...e.querySelectorAll(".word")];for(const e of t){const t=e.querySelectorAll(".char"),o=t.length;gsap.fromTo(t,{"will-change":"transform, filter",transformOrigin:"50% 100%",scale:e=>{const t=e{const t=e{const t=e{p.forEach((function(e,t){e.getAttribute("data-image"),gsap.timeline().addLabel("rotate,+=0").to(e,{transform:"rotate3d(0, 1, 0, 180deg)",perspective:"1000px",duration:1.2,ease:"power2.in",id:t+1},"rotate").add((()=>{e.classList.add(`menu-image${t}`)}))}))}));let m=e(".knob"),f=e(".dark-toggle"),h=e("body"),y=e(".mf-cursor"),w=!1;if(f.addEventListener("click",(()=>{w=!w,gsap.timeline().to(m,{x:()=>w?18:0,duration:.4,ease:"expo.in"}),t(".portfolio-map a").forEach((e=>{gsap.set(e,{color:w?"#fff":"#000"})})),h.classList.toggle("dark-mode"),y.classList.add("-exclusion")})),innerWidth>767){new MouseFollower}if(e(".mf-cursor")){function T(){innerWidth<768&&(e(".mf-cursor").style.display="none")}T()}window.addEventListener("resize",T);t(".magnetic").forEach((e=>{e.addEventListener("mouseenter",(()=>{console.log("magnettt")})),new Magnetic(e,{y:.4,x:.4,s:.2,rs:.7})})),$("[data-magnetic]").each((function(){new Magnetic(this)})),gsap.registerPlugin(ScrollToPlugin);let v=e(".tocontact"),M=e(".toworks"),E=e(".tohero"),L=e(".toabout");v.addEventListener("click",(()=>{gsap.to(window,{duration:3,scrollTo:".free-time",ease:"expo.out"})})),M.addEventListener("click",(()=>{gsap.to(window,{duration:3,scrollTo:{y:".works",offsetY:50},ease:e=>Math.min(1,1.001-Math.pow(2,-10*e))})})),E.addEventListener("click",(()=>{gsap.to(window,{duration:3,scrollTo:{y:".content-hero"},ease:e=>Math.min(1,1.001-Math.pow(2,-10*e))})})),L.addEventListener("click",(()=>{gsap.to(window,{duration:3,scrollTo:{y:".intro-port",offsetY:10},ease:e=>Math.min(1,1.001-Math.pow(2,-10*e))})}));let b=t(".portfolio-map a"),S=e("body"),k=getComputedStyle(S).backgroundColor,x=getComputedStyle(S).color,C=gsap.timeline({paused:!0,scrollTrigger:{trigger:".free-time",start:"top center",markers:!1,onEnter:()=>{C.play()},onLeaveBack:()=>{C.reverse()}}});gsap.to(window,{scrollTrigger:{trigger:"body",start:"top top",onEnter:()=>{C.reverse()}}}),b.forEach((e=>{C.fromTo(e,{color:x},{color:k,duration:.4,ease:"power1.out"})}))}),0)}));const o=["Hello","Hola","Bonjour","Salut","Chao"];let r=0;setInterval((function(){const e=document.getElementById("changehello");r=(r+1)%o.length,e.innerHTML=o[r]}),1e4);const n=()=>{if(innerWidth>767){gsap.registerPlugin(ScrollTrigger);[...t("[data-effect19]")].forEach((e=>{const t=e.querySelectorAll(".char");t.forEach((e=>gsap.set(e.parentNode,{perspective:1e3}))),gsap.fromTo(t,{"will-change":"opacity, transform",transformOrigin:"50% 0%",opacity:0,rotationX:-90,z:-200},{ease:"power1",opacity:1,stagger:.05,rotationX:0,z:0,scrollTrigger:{trigger:e,start:"center bottom",end:"bottom top+=40%",scrub:!0}})}))}};let i;if(n(),window.addEventListener("resize",(()=>{clearTimeout(i),i=setTimeout((()=>{var e;n(),innerWidth>767&&document.hasFocus()&&(navigator.clipboard.writeText(e),t(".copy").forEach((e=>{e.innerHTML="Copied",setTimeout((()=>{e.innerHTML="Copy!"}),4e3)})))}),250)})),innerWidth>767){gsap.timeline({scrollTrigger:{trigger:".wiggle",start:"top 90%",end:"top 30%",scrub:1}}).fromTo("#logo-36",{scale:.3,y:"-200px",rotate:0},{scale:1,y:0,rotate:360})}document.addEventListener("DOMContentLoaded",(()=>{let e=[...t(".rotate-i .char")];const o=gsap.timeline({repeat:-1,duration:2,delay:3,yoyo:!0});o.to(e[6],{rotation:360}),o.to(e[11],{rotation:360})}));e(".email-box")})(); \ No newline at end of file +(()=>{let e=e=>document.querySelector(e),t=e=>document.querySelectorAll(e);"serviceWorker"in navigator&&window.addEventListener("load",(()=>{navigator.serviceWorker.register("./offline-uzitrake.js").catch((e=>console.log("Error:",e)))})),document.addEventListener("DOMContentLoaded",(function(){setTimeout((()=>{let o=e(".time");function r(){var e=new Date;o.innerHTML=e.toTimeString().substr(0,5)}r(),setInterval((()=>{r()}),1e3);let i=e(".button-menu"),n=e(".button-close"),a=t(".menu-will-open"),s=e(".mf-cursor");function l(){if(innerWidth>767){const e=new Lenis({duration:3,easing:e=>Math.min(1,1.001-Math.pow(2,-10*e)),direction:"vertical",gestureDirection:"vertical",smooth:!0,smoothTouch:!1,touchMultiplier:2,infinite:!1,autoResize:!0});requestAnimationFrame((function t(o){e.raf(o),requestAnimationFrame(t)}))}}if(a.forEach((e=>{i.addEventListener("click",(()=>{setTimeout((()=>{e.classList.add("menu-is-open"),s&&(s.style.display="none")}),1e3)})),n.addEventListener("click",(()=>{setTimeout((()=>{e.classList.remove("menu-is-open"),s&&(s.style.display="block")}),1e3)}))})),l(),window.addEventListener("resize",l),gsap.registerPlugin(ScrollTrigger),innerWidth>767){t("[line-triggerX]").forEach((function(e){const t=e.getAttribute("line-triggerX"),o=function(e){const t=gsap.timeline({defaults:{duration:2,ease:"power2.out"}});return t.fromTo(e,{scaleX:1,opacity:1,transformOrigin:"center center"},{scaleX:0,opacity:0}),t}(e);ScrollTrigger.create({trigger:t,start:"top 80%",animation:o,onEnter:()=>o.play()})})),t("[line-triggerY]").forEach((function(e){const t=e.getAttribute("line-triggerY"),o=function(e){const t=gsap.timeline({defaults:{duration:2,ease:"power2.out",delay:1.2}});return t.fromTo(e,{scaleY:1,opacity:1,transformOrigin:"bottom"},{scaleY:0,opacity:0}),t}(e);ScrollTrigger.create({trigger:t,start:"top 80%",animation:o,toggleActions:"play none none none"})}))}if(innerWidth>767){function c(){gsap.registerPlugin(ScrollTrigger),gsap.timeline({scrollTrigger:{trigger:".empty",start:"top bottom",end:"bottom 60%",scrub:!0}}).to(".empty",{y:"-40vh",ease:"expo.out"})}c(),window.addEventListener("resize",c)}const g=[...t("[data-effect28]")];if(g){gsap.registerPlugin(ScrollTrigger),gsap.registerPlugin(SplitText);new SplitText("[data-effect28]",{type:"words,lines,chars",wordsClass:"content__title word",charsClass:"char",linesClass:"lines"});g.forEach((e=>{const t=[...e.querySelectorAll(".word")];for(const e of t){const t=e.querySelectorAll(".char"),o=t.length;gsap.fromTo(t,{"will-change":"transform, filter",transformOrigin:"50% 100%",scale:e=>{const t=e{const t=e{const t=e{p.forEach((function(e,t){e.getAttribute("data-image"),gsap.timeline().addLabel("rotate,+=0").to(e,{transform:"rotate3d(0, 1, 0, 180deg)",perspective:"1000px",duration:1.2,ease:"power2.in",id:t+1},"rotate").add((()=>{e.classList.add(`menu-image${t}`)}))}))}));let m=e(".knob"),f=e(".dark-toggle"),h=e("body"),y=e(".mf-cursor"),w=!1;if(f.addEventListener("click",(()=>{w=!w,gsap.timeline().to(m,{x:()=>w?18:0,duration:.4,ease:"expo.in"}),t(".portfolio-map a").forEach((e=>{gsap.set(e,{color:w?"#fff":"#000"})})),h.classList.toggle("dark-mode"),y.classList.add("-exclusion")})),innerWidth>767){new MouseFollower}if(e(".mf-cursor")){function T(){innerWidth<768&&(e(".mf-cursor").style.display="none")}T()}window.addEventListener("resize",T);t(".magnetic").forEach((e=>{e.addEventListener("mouseenter",(()=>{console.log("magnettt")})),new Magnetic(e,{y:.4,x:.4,s:.2,rs:.7})})),$("[data-magnetic]").each((function(){new Magnetic(this)})),gsap.registerPlugin(ScrollToPlugin);let v=e(".tocontact"),M=e(".toworks"),E=e(".tohero"),b=e(".toabout");v.addEventListener("click",(()=>{gsap.to(window,{duration:3,scrollTo:".free-time",ease:"expo.out"})})),M.addEventListener("click",(()=>{gsap.to(window,{duration:3,scrollTo:{y:".works",offsetY:50},ease:e=>Math.min(1,1.001-Math.pow(2,-10*e))})})),E.addEventListener("click",(()=>{gsap.to(window,{duration:3,scrollTo:{y:".content-hero"},ease:e=>Math.min(1,1.001-Math.pow(2,-10*e))})})),b.addEventListener("click",(()=>{gsap.to(window,{duration:3,scrollTo:{y:".intro-port",offsetY:10},ease:e=>Math.min(1,1.001-Math.pow(2,-10*e))})}));let L=t(".portfolio-map a"),k=e("body"),S=getComputedStyle(k).backgroundColor,x=getComputedStyle(k).color,A=gsap.timeline({paused:!0,scrollTrigger:{trigger:".free-time",start:"top center",markers:!1,onEnter:()=>{A.play()},onLeaveBack:()=>{A.reverse()}}});gsap.to(window,{scrollTrigger:{trigger:"body",start:"top top",onEnter:()=>{A.reverse()}}}),L.forEach((e=>{A.fromTo(e,{color:x},{color:S,duration:.4,ease:"power1.out"})}))}),0)}));const o=["Hello","Hola","Bonjour","Salut","Chao"];let r=0;setInterval((function(){const e=document.getElementById("changehello");r=(r+1)%o.length,e.innerHTML=o[r]}),1e4);const i=()=>{if(innerWidth>767){gsap.registerPlugin(ScrollTrigger);[...t("[data-effect19]")].forEach((e=>{const t=e.querySelectorAll(".char");t.forEach((e=>gsap.set(e.parentNode,{perspective:1e3}))),gsap.fromTo(t,{"will-change":"opacity, transform",transformOrigin:"50% 0%",opacity:0,rotationX:-90,z:-200},{ease:"power1",opacity:1,stagger:.05,rotationX:0,z:0,scrollTrigger:{trigger:e,start:"center bottom",end:"bottom top+=40%",scrub:!0}})}))}};let n;if(i(),window.addEventListener("resize",(()=>{clearTimeout(n),n=setTimeout((()=>{var e;i(),innerWidth>767&&document.hasFocus()&&(navigator.clipboard.writeText(e),t(".copy").forEach((e=>{e.innerHTML="Copied",setTimeout((()=>{e.innerHTML="Copy!"}),4e3)})))}),250)})),innerWidth>767){gsap.timeline({scrollTrigger:{trigger:".wiggle",start:"top 90%",end:"top 30%",scrub:1}}).fromTo("#logo-36",{scale:.3,y:"-200px",rotate:0},{scale:1,y:0,rotate:360})}document.addEventListener("DOMContentLoaded",(()=>{let e=[...t(".rotate-i .char")];const o=gsap.timeline({repeat:-1,duration:2,delay:3,yoyo:!0});o.to(e[6],{rotation:360}),o.to(e[11],{rotation:360})}));e(".email-box")})(); \ No newline at end of file diff --git a/public/index.html b/public/index.html index e920f10..a3f7182 100644 --- a/public/index.html +++ b/public/index.html @@ -14,4 +14,4 @@ C17.01,24.487,15.067,24.5,13.288,23.896z M8.12,13.122l-5.645-0.859c-0.741,2.666-0.666,5.514,0.225,8.143l5.491-1.375 C7.452,17.138,7.426,15.029,8.12,13.122z M28.763,11.333l-4.965,1.675c0.798,2.106,0.716,4.468-0.247,6.522l5.351,0.672 C29.827,17.319,29.78,14.193,28.763,11.333z M11.394,2.883l1.018,5.528c2.027-0.954,4.356-1.05,6.442-0.288l1.583-5.137 - C17.523,1.94,14.328,1.906,11.394,2.883z">
\ No newline at end of file + C17.523,1.94,14.328,1.906,11.394,2.883z">
\ No newline at end of file diff --git a/public/js/distort/index.js b/public/js/distort/index.js index c10b270..db38849 100644 --- a/public/js/distort/index.js +++ b/public/js/distort/index.js @@ -1 +1 @@ -import{Cursor}from"./cursor.js";import{MenuItem}from"./menuItem.js";const splitting=Splitting();gsap.registerPlugin(SplitText),document.addEventListener("DOMContentLoaded",(()=>{document.querySelectorAll(".split-char-title").forEach((e=>{new SplitText(e,{type:"chars",charsClass:"char"})}))}));const cursor=new Cursor(document.querySelector(".cursor"));[...document.querySelectorAll(".menu > a")].forEach((e=>new MenuItem(e)));let togglePathx=document.querySelector(".dark-toggle");togglePathx.addEventListener("click",(()=>{[...document.querySelectorAll("a")].forEach((e=>{cursor.enter(),cursor.leave()}))})),[...document.querySelectorAll("a")].forEach((e=>{e.addEventListener("mouseenter",(()=>cursor.enter())),e.addEventListener("mouseleave",(()=>cursor.leave()))})); \ No newline at end of file +import{Cursor}from"./cursor.js";import{MenuItem}from"./menuItem.js";gsap.registerPlugin(SplitText),document.addEventListener("DOMContentLoaded",(()=>{document.querySelectorAll(".split-char").forEach((e=>{new SplitText(e,{type:"chars",charsClass:"char"})}))}));const cursor=new Cursor(document.querySelector(".cursor"));[...document.querySelectorAll(".menu > a")].forEach((e=>new MenuItem(e)));let togglePathx=document.querySelector(".dark-toggle");togglePathx.addEventListener("click",(()=>{[...document.querySelectorAll("a")].forEach((e=>{cursor.enter(),cursor.leave()}))})),[...document.querySelectorAll("a")].forEach((e=>{e.addEventListener("mouseenter",(()=>cursor.enter())),e.addEventListener("mouseleave",(()=>cursor.leave()))})); \ No newline at end of file diff --git a/public/js/main.js b/public/js/main.js index a8de397..ebc482c 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -1 +1 @@ -let select=e=>document.querySelector(e),selectAll=e=>document.querySelectorAll(e);"serviceWorker"in navigator&&window.addEventListener("load",(()=>{navigator.serviceWorker.register("./offline-uzitrake.js").catch((e=>console.log("Error:",e)))})),gsap.registerPlugin(SplitText),document.addEventListener("DOMContentLoaded",(()=>{selectAll(".split-char").forEach((e=>{new SplitText(e,{type:"chars",charsClass:"char"})}))})),document.addEventListener("DOMContentLoaded",(function(){setTimeout((()=>{let e=select(".time");function t(){var t=new Date;e.innerHTML=t.toTimeString().substr(0,5)}t(),setInterval((()=>{t()}),1e3);let o=select(".button-menu"),r=select(".button-close"),n=selectAll(".menu-will-open"),i=select(".mf-cursor");function a(){if(innerWidth>767){const e=new Lenis({duration:3,easing:e=>Math.min(1,1.001-Math.pow(2,-10*e)),direction:"vertical",gestureDirection:"vertical",smooth:!0,smoothTouch:!1,touchMultiplier:2,infinite:!1,autoResize:!0});requestAnimationFrame((function t(o){e.raf(o),requestAnimationFrame(t)}))}}if(n.forEach((e=>{o.addEventListener("click",(()=>{setTimeout((()=>{e.classList.add("menu-is-open"),i&&(i.style.display="none")}),1e3)})),r.addEventListener("click",(()=>{setTimeout((()=>{e.classList.remove("menu-is-open"),i&&(i.style.display="block")}),1e3)}))})),a(),window.addEventListener("resize",a),gsap.registerPlugin(ScrollTrigger),innerWidth>767){selectAll("[line-triggerX]").forEach((function(e){const t=e.getAttribute("line-triggerX"),o=function(e){const t=gsap.timeline({defaults:{duration:2,ease:"power2.out"}});return t.fromTo(e,{scaleX:1,opacity:1,transformOrigin:"center center"},{scaleX:0,opacity:0}),t}(e);ScrollTrigger.create({trigger:t,start:"top 80%",animation:o,onEnter:()=>o.play()})})),selectAll("[line-triggerY]").forEach((function(e){const t=e.getAttribute("line-triggerY"),o=function(e){const t=gsap.timeline({defaults:{duration:2,ease:"power2.out",delay:1.2}});return t.fromTo(e,{scaleY:1,opacity:1,transformOrigin:"bottom"},{scaleY:0,opacity:0}),t}(e);ScrollTrigger.create({trigger:t,start:"top 80%",animation:o,toggleActions:"play none none none"})}))}if(innerWidth>767){function l(){gsap.registerPlugin(ScrollTrigger),gsap.timeline({scrollTrigger:{trigger:".empty",start:"top bottom",end:"bottom 60%",scrub:!0}}).to(".empty",{y:"-40vh",ease:"expo.out"})}l(),window.addEventListener("resize",l)}const s=[...selectAll("[data-effect28]")];if(s){gsap.registerPlugin(ScrollTrigger),gsap.registerPlugin(SplitText);new SplitText("[data-effect28]",{type:"words,lines,chars",wordsClass:"content__title word",charsClass:"char",linesClass:"lines"});s.forEach((e=>{const t=[...e.querySelectorAll(".word")];for(const e of t){const t=e.querySelectorAll(".char"),o=t.length;gsap.fromTo(t,{"will-change":"transform, filter",transformOrigin:"50% 100%",scale:e=>{const t=e{const t=e{const t=e{d.forEach((function(e,t){e.getAttribute("data-image"),gsap.timeline().addLabel("rotate,+=0").to(e,{transform:"rotate3d(0, 1, 0, 180deg)",perspective:"1000px",duration:1.2,ease:"power2.in",id:t+1},"rotate").add((()=>{e.classList.add(`menu-image${t}`)}))}))}));let u=select(".knob"),p=select(".dark-toggle"),m=select("body"),f=select(".mf-cursor"),h=!1;if(p.addEventListener("click",(()=>{h=!h,gsap.timeline().to(u,{x:()=>h?18:0,duration:.4,ease:"expo.in"}),selectAll(".portfolio-map a").forEach((e=>{gsap.set(e,{color:h?"#fff":"#000"})})),m.classList.toggle("dark-mode"),f.classList.add("-exclusion")})),innerWidth>767){new MouseFollower}if(select(".mf-cursor")){function w(){innerWidth<768&&(select(".mf-cursor").style.display="none")}w()}window.addEventListener("resize",w);selectAll(".magnetic").forEach((e=>{e.addEventListener("mouseenter",(()=>{console.log("magnettt")})),new Magnetic(e,{y:.4,x:.4,s:.2,rs:.7})})),$("[data-magnetic]").each((function(){new Magnetic(this)})),gsap.registerPlugin(ScrollToPlugin);let y=select(".tocontact"),T=select(".toworks"),M=select(".tohero"),b=select(".toabout");y.addEventListener("click",(()=>{gsap.to(window,{duration:3,scrollTo:".free-time",ease:"expo.out"})})),T.addEventListener("click",(()=>{gsap.to(window,{duration:3,scrollTo:{y:".works",offsetY:50},ease:e=>Math.min(1,1.001-Math.pow(2,-10*e))})})),M.addEventListener("click",(()=>{gsap.to(window,{duration:3,scrollTo:{y:".content-hero"},ease:e=>Math.min(1,1.001-Math.pow(2,-10*e))})})),b.addEventListener("click",(()=>{gsap.to(window,{duration:3,scrollTo:{y:".intro-port",offsetY:10},ease:e=>Math.min(1,1.001-Math.pow(2,-10*e))})}));let v=selectAll(".portfolio-map a"),E=select("body"),L=getComputedStyle(E).backgroundColor,x=getComputedStyle(E).color,A=gsap.timeline({paused:!0,scrollTrigger:{trigger:".free-time",start:"top center",markers:!1,onEnter:()=>{A.play()},onLeaveBack:()=>{A.reverse()}}});gsap.to(window,{scrollTrigger:{trigger:"body",start:"top top",onEnter:()=>{A.reverse()}}}),v.forEach((e=>{A.fromTo(e,{color:x},{color:L,duration:.4,ease:"power1.out"})}))}),0)}));const words=["Hello","Hola","Bonjour","Salut","Chao"];let currentIndex=0;function changeWord(){const e=document.getElementById("changehello");currentIndex=(currentIndex+1)%words.length,e.innerHTML=words[currentIndex]}function copyToClipboard(e){if(innerWidth>767&&document.hasFocus()){navigator.clipboard.writeText(e),selectAll(".copy").forEach((e=>{e.innerHTML="Copied",setTimeout((()=>{e.innerHTML="Copy!"}),4e3)}))}}setInterval(changeWord,1e4);const text3d=()=>{if(innerWidth>767){gsap.registerPlugin(ScrollTrigger);[...selectAll("[data-effect19]")].forEach((e=>{const t=e.querySelectorAll(".char");t.forEach((e=>gsap.set(e.parentNode,{perspective:1e3}))),gsap.fromTo(t,{"will-change":"opacity, transform",transformOrigin:"50% 0%",opacity:0,rotationX:-90,z:-200},{ease:"power1",opacity:1,stagger:.05,rotationX:0,z:0,scrollTrigger:{trigger:e,start:"center bottom",end:"bottom top+=40%",scrub:!0}})}))}};let resizeTimer;if(text3d(),window.addEventListener("resize",(()=>{clearTimeout(resizeTimer),resizeTimer=setTimeout((()=>{text3d(),copyToClipboard()}),250)})),innerWidth>767){gsap.timeline({scrollTrigger:{trigger:".wiggle",start:"top 90%",end:"top 30%",scrub:1}}).fromTo("#logo-36",{scale:.3,y:"-200px",rotate:0},{scale:1,y:0,rotate:360})}document.addEventListener("DOMContentLoaded",(()=>{let e=[...selectAll(".rotate-i .char")];const t=gsap.timeline({repeat:-1,duration:2,delay:3,yoyo:!0});t.to(e[6],{rotation:360}),t.to(e[11],{rotation:360})}));let emailbox=select(".email-box"); \ No newline at end of file +let select=e=>document.querySelector(e),selectAll=e=>document.querySelectorAll(e);"serviceWorker"in navigator&&window.addEventListener("load",(()=>{navigator.serviceWorker.register("./offline-uzitrake.js").catch((e=>console.log("Error:",e)))})),document.addEventListener("DOMContentLoaded",(function(){setTimeout((()=>{let e=select(".time");function t(){var t=new Date;e.innerHTML=t.toTimeString().substr(0,5)}t(),setInterval((()=>{t()}),1e3);let o=select(".button-menu"),r=select(".button-close"),n=selectAll(".menu-will-open"),i=select(".mf-cursor");function a(){if(innerWidth>767){const e=new Lenis({duration:3,easing:e=>Math.min(1,1.001-Math.pow(2,-10*e)),direction:"vertical",gestureDirection:"vertical",smooth:!0,smoothTouch:!1,touchMultiplier:2,infinite:!1,autoResize:!0});requestAnimationFrame((function t(o){e.raf(o),requestAnimationFrame(t)}))}}if(n.forEach((e=>{o.addEventListener("click",(()=>{setTimeout((()=>{e.classList.add("menu-is-open"),i&&(i.style.display="none")}),1e3)})),r.addEventListener("click",(()=>{setTimeout((()=>{e.classList.remove("menu-is-open"),i&&(i.style.display="block")}),1e3)}))})),a(),window.addEventListener("resize",a),gsap.registerPlugin(ScrollTrigger),innerWidth>767){selectAll("[line-triggerX]").forEach((function(e){const t=e.getAttribute("line-triggerX"),o=function(e){const t=gsap.timeline({defaults:{duration:2,ease:"power2.out"}});return t.fromTo(e,{scaleX:1,opacity:1,transformOrigin:"center center"},{scaleX:0,opacity:0}),t}(e);ScrollTrigger.create({trigger:t,start:"top 80%",animation:o,onEnter:()=>o.play()})})),selectAll("[line-triggerY]").forEach((function(e){const t=e.getAttribute("line-triggerY"),o=function(e){const t=gsap.timeline({defaults:{duration:2,ease:"power2.out",delay:1.2}});return t.fromTo(e,{scaleY:1,opacity:1,transformOrigin:"bottom"},{scaleY:0,opacity:0}),t}(e);ScrollTrigger.create({trigger:t,start:"top 80%",animation:o,toggleActions:"play none none none"})}))}if(innerWidth>767){function l(){gsap.registerPlugin(ScrollTrigger),gsap.timeline({scrollTrigger:{trigger:".empty",start:"top bottom",end:"bottom 60%",scrub:!0}}).to(".empty",{y:"-40vh",ease:"expo.out"})}l(),window.addEventListener("resize",l)}const s=[...selectAll("[data-effect28]")];if(s){gsap.registerPlugin(ScrollTrigger),gsap.registerPlugin(SplitText);new SplitText("[data-effect28]",{type:"words,lines,chars",wordsClass:"content__title word",charsClass:"char",linesClass:"lines"});s.forEach((e=>{const t=[...e.querySelectorAll(".word")];for(const e of t){const t=e.querySelectorAll(".char"),o=t.length;gsap.fromTo(t,{"will-change":"transform, filter",transformOrigin:"50% 100%",scale:e=>{const t=e{const t=e{const t=e{d.forEach((function(e,t){e.getAttribute("data-image"),gsap.timeline().addLabel("rotate,+=0").to(e,{transform:"rotate3d(0, 1, 0, 180deg)",perspective:"1000px",duration:1.2,ease:"power2.in",id:t+1},"rotate").add((()=>{e.classList.add(`menu-image${t}`)}))}))}));let u=select(".knob"),p=select(".dark-toggle"),m=select("body"),f=select(".mf-cursor"),h=!1;if(p.addEventListener("click",(()=>{h=!h,gsap.timeline().to(u,{x:()=>h?18:0,duration:.4,ease:"expo.in"}),selectAll(".portfolio-map a").forEach((e=>{gsap.set(e,{color:h?"#fff":"#000"})})),m.classList.toggle("dark-mode"),f.classList.add("-exclusion")})),innerWidth>767){new MouseFollower}if(select(".mf-cursor")){function w(){innerWidth<768&&(select(".mf-cursor").style.display="none")}w()}window.addEventListener("resize",w);selectAll(".magnetic").forEach((e=>{e.addEventListener("mouseenter",(()=>{console.log("magnettt")})),new Magnetic(e,{y:.4,x:.4,s:.2,rs:.7})})),$("[data-magnetic]").each((function(){new Magnetic(this)})),gsap.registerPlugin(ScrollToPlugin);let y=select(".tocontact"),T=select(".toworks"),b=select(".tohero"),M=select(".toabout");y.addEventListener("click",(()=>{gsap.to(window,{duration:3,scrollTo:".free-time",ease:"expo.out"})})),T.addEventListener("click",(()=>{gsap.to(window,{duration:3,scrollTo:{y:".works",offsetY:50},ease:e=>Math.min(1,1.001-Math.pow(2,-10*e))})})),b.addEventListener("click",(()=>{gsap.to(window,{duration:3,scrollTo:{y:".content-hero"},ease:e=>Math.min(1,1.001-Math.pow(2,-10*e))})})),M.addEventListener("click",(()=>{gsap.to(window,{duration:3,scrollTo:{y:".intro-port",offsetY:10},ease:e=>Math.min(1,1.001-Math.pow(2,-10*e))})}));let v=selectAll(".portfolio-map a"),E=select("body"),L=getComputedStyle(E).backgroundColor,x=getComputedStyle(E).color,A=gsap.timeline({paused:!0,scrollTrigger:{trigger:".free-time",start:"top center",markers:!1,onEnter:()=>{A.play()},onLeaveBack:()=>{A.reverse()}}});gsap.to(window,{scrollTrigger:{trigger:"body",start:"top top",onEnter:()=>{A.reverse()}}}),v.forEach((e=>{A.fromTo(e,{color:x},{color:L,duration:.4,ease:"power1.out"})}))}),0)}));const words=["Hello","Hola","Bonjour","Salut","Chao"];let currentIndex=0;function changeWord(){const e=document.getElementById("changehello");currentIndex=(currentIndex+1)%words.length,e.innerHTML=words[currentIndex]}function copyToClipboard(e){if(innerWidth>767&&document.hasFocus()){navigator.clipboard.writeText(e),selectAll(".copy").forEach((e=>{e.innerHTML="Copied",setTimeout((()=>{e.innerHTML="Copy!"}),4e3)}))}}setInterval(changeWord,1e4);const text3d=()=>{if(innerWidth>767){gsap.registerPlugin(ScrollTrigger);[...selectAll("[data-effect19]")].forEach((e=>{const t=e.querySelectorAll(".char");t.forEach((e=>gsap.set(e.parentNode,{perspective:1e3}))),gsap.fromTo(t,{"will-change":"opacity, transform",transformOrigin:"50% 0%",opacity:0,rotationX:-90,z:-200},{ease:"power1",opacity:1,stagger:.05,rotationX:0,z:0,scrollTrigger:{trigger:e,start:"center bottom",end:"bottom top+=40%",scrub:!0}})}))}};let resizeTimer;if(text3d(),window.addEventListener("resize",(()=>{clearTimeout(resizeTimer),resizeTimer=setTimeout((()=>{text3d(),copyToClipboard()}),250)})),innerWidth>767){gsap.timeline({scrollTrigger:{trigger:".wiggle",start:"top 90%",end:"top 30%",scrub:1}}).fromTo("#logo-36",{scale:.3,y:"-200px",rotate:0},{scale:1,y:0,rotate:360})}document.addEventListener("DOMContentLoaded",(()=>{let e=[...selectAll(".rotate-i .char")];const t=gsap.timeline({repeat:-1,duration:2,delay:3,yoyo:!0});t.to(e[6],{rotation:360}),t.to(e[11],{rotation:360})}));let emailbox=select(".email-box"); \ No newline at end of file diff --git a/public/js/index.js b/public/js/menu.js similarity index 100% rename from public/js/index.js rename to public/js/menu.js diff --git a/public/js/works/index.js b/public/js/works/index.js index 3b4d5a7..ecc5d60 100644 --- a/public/js/works/index.js +++ b/public/js/works/index.js @@ -1 +1 @@ -import{preloadImages,abibae}from"./utils.js";import{Item}from"./item.js";Promise.all([preloadImages(".item__img, .content__img")]).then((()=>{abibae(),document.body.classList.remove("loading");let e=[];[...document.querySelectorAll(".items > .item")].forEach((t=>e.push(new Item(t,e)))),[...document.querySelectorAll("a, .unbutton")].forEach((e=>{}))})); \ No newline at end of file +import{preloadImages,abibae}from"./utils.js";import{Item}from"./item.js";document.addEventListener("DOMContentLoaded",(()=>{document.querySelectorAll(".split-char-title").forEach((e=>{new SplitText(e,{type:"chars",charsClass:"char"})}))})),Promise.all([preloadImages(".item__img, .content__img")]).then((()=>{abibae(),document.body.classList.remove("loading");let e=[];[...document.querySelectorAll(".items > .item")].forEach((t=>e.push(new Item(t,e)))),[...document.querySelectorAll("a, .unbutton")].forEach((e=>{}))})); \ No newline at end of file