gsap-dist.js

gsap.registerPlugin(ScrollTrigger,TextPlugin);const srollTL=gsap.timeline({scrollTrigger:{trigger:".trigger",start:"top 80%",end:"top 20%",scrub:!0,pin:!0}}),viewHeight=$(".view")[0].offsetHeight;function clickOption(){const t=$(".answer li");t.on("click",(function(){const e=gsap.timeline();e.to(".ghost",{xPercent:130,duration:1}).to(".dialog-1",{xPercent:-130,duration:1},"<"),e.to(".contest-text",{xPercent:130,duration:1}),t.hasClass("cant-wait")&&setTimeout((()=>{t.hide(),$(".cant-wait").addClass("show"),$(".cant-wait").addClass("active")}),800)}))}srollTL.to(".chi",{xPercent:"-80",yPercent:"0"}),srollTL.to(".ghost",{xPercent:"30",yPercent:"-40"},"<"),srollTL.to(".dialog-1",{xPercent:"110",yPercent:"0"},"<"),srollTL.to(".dialog-2",{xPercent:"-160",yPercent:"0"},"<"),srollTL.to(".option-block-1",{xPercent:"100",yPercent:"0"},"<"),clickOption();const trigger=document.querySelector(".question");ScrollTrigger.create({trigger:trigger,onLeave:(gsap.to(".challenger",{text:"挑戰者（CLICK）",duration:1,scrollTrigger:{trigger:".question",toggleActions:"play pause resume reset"}}),gsap.to(".do-what",{text:"要做什麼呢",duration:2,delay:1,scrollTrigger:{trigger:".question",toggleActions:"play pause resume reset"}}),void gsap.fromTo(".q-mark",0,{visibility:"hidden",opacity:"0"},{scrollTrigger:{trigger:".question",toggleActions:"play pause resume reset"},visibility:"visible",delay:3,repeat:-1,yoyo:!0,repeatDelay:.6,opacity:"1"}))}),$(".cant-wait").on("click",(function(){const t=gsap.timeline();t.to(".option-block-1",{yPercent:100,duration:1}),t.to(".chi",{yPercent:100,duration:1},"<"),t.to(".dialog-2",{y:250,duration:1},"<"),t.to(".contest-text",{xPercent:-130,duration:1}),t.to(".week-img",{xPercent:-160,y:800,duration:1})})),$(".week1").on("click",(function(){gsap.timeline().to(".week1",{yPercent:-300,duration:1})})),$(".week2").on("click",(function(){gsap.timeline().to(".week2",{yPercent:-300,duration:1})})),$(".week3").on("click",(function(){gsap.to(".fail",{text:"每個挑戰主題提供一週開發時間，未在隔週一中午12:00前登陸作品者，<br >當週即為挑戰失敗！(請點擊寶箱)",duration:10,repeat:-1});gsap.timeline().to(".week3",{yPercent:-300,duration:1}).to(".dialog-2",{xPercent:200,duration:1},"<").to(".option-block-2",{left:"0",duration:1,xPercent:0},"<")})),$(".box-img").on("click",(function(){gsap.timeline().to(".box-img",{scale:1.1,duration:1,repeat:-1,repeatDelay:.3}).to(".box-img",{x:0,y:0,duration:.5}).to(".box-img",{x:-220,y:305,duration:1}).to(".box-img",{x:-445,y:110,duration:1}).to(".box-img",{x:-630,y:350,duration:1}).to(".box-img",{x:-770,y:385,duration:1}).to(".box-img",{scale:1.1,duration:1,repeat:-1,repeatDelay:.3}).to(window,{duration:2,scrollTo:2*viewHeight},">")}));const trigger2=document.querySelector(".view-2");ScrollTrigger.create({trigger:trigger2,end:"top 5%",onLeave:(gsap.to(".title-2",{text:"區區修煉已經無法滿足了嗎？還有比賽等著你！",duration:5,scrollTrigger:{trigger:".title-2",toggleActions:"play pause resume reset"}}),void gsap.to(".gold",{xPercent:"-50",ease:"none",duration:10,repeat:-1,yoyo:!0,scrollTrigger:{trigger:".title-2",toggleActions:"play pause resume reset"}}))}),Observer.create({target:".view-2",type:"wheel,touch,scroll",onDown:()=>gsap.to(window,{duration:2,scrollTo:3*viewHeight})}),Observer.create({target:"footer",type:"wheel,touch,scroll",onUp:()=>gsap.timeline().to(".photo-block",{opacity:1,yPercent:0,duration:1}).to(".sponsor",{opacity:0,yPercent:100,duration:1},"<").to(".left-wrap",{xPercent:-110,duration:1},"<").to(".right-wrap",{xPercent:110,duration:1},"<").to(".share",{yPercent:0,opacity:1,duration:1},"<"),onDown:()=>gsap.timeline().to(".sponsor",{opacity:1,yPercent:-100,duration:1}).to(".photo-block",{opacity:0,yPercent:-100,duration:1},"<").to(".left-wrap",{xPercent:0,opacity:1,duration:1},"<").to(".right-wrap",{xPercent:0,opacity:1,duration:1},"<").to(".share",{yPercent:100,opacity:0,duration:1},"<")});