Untitled
unknown
javascript
a month ago
1.9 kB
1
Indexable
Never
console.clear(); gsap.registerPlugin(ScrollTrigger); // Phần 1: .slider-tsumugu (cuộn dọc) const section = document.querySelector(".slider-tsumugu"); const items = gsap.utils.toArray(".item-tsumugu-scroll"); const tl = gsap.timeline({ scrollTrigger: { trigger: section, start: "top top", end: "+=" + (100 * items.length - 1) + "%", scrub: 1, pin: true, markers: true, onUpdate: self => { const progress = self.progress; const index = Math.round(progress * (items.length - 1)); items.forEach((item, i) => { if (i === index) { item.classList.add('active'); } else { item.classList.remove('active'); } }); } } }); tl.set(items[0], { opacity: 1, y: 0, zIndex: 1 }); // Phần 2: .content-servicessssss (cuộn ngang) const containerss = document.querySelector('#scrollContainer'); gsap.to(containerss, { xPercent: -100 * (containerss.children.length - 1), ease: 'none', scrollTrigger: { trigger: containerss, pin: true, scrub: 1, end: () => "+=" + containerss.offsetWidth } }); // Phần 3: .slider-support (cuộn dọc) const newSection = document.querySelector(".slider-support"); const itemsssss = gsap.utils.toArray(".item-cs"); const tlss = gsap.timeline({ scrollTrigger: { trigger: newSection, start: "top top", end: "+=" + (100 * itemsssss.length - 1) + "%", scrub: 1, pin: true, markers: true, onUpdate: self => { const progress = self.progress; const index = Math.round(progress * (itemsssss.length - 1)); itemsssss.forEach((item, i) => { if (i === index) { item.classList.add('active'); } else { item.classList.remove('active'); } }); } } }); tlss.set(itemsssss[0], { opacity: 1, y: 0, zIndex: 1 });
Leave a Comment