Infinite looped panels

미리보기 안의 버튼·입력·포인터로 모션을 확인하세요. 실행 방식은 아래 활용 메모를 참고하세요.

<!doctype html>
<!-- Archived from GSAP Demo Hub / infinite-looped-panels
Original editor: https://codepen.io/GreenSock/pen/VwbywPd
HTML/CSS/JS source panels are preserved separately. Runtime GSAP: 3.15.0 official distribution. -->
<html lang="en" class=""><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Infinite looped panels</title>
<link href='//fonts.googleapis.com/css?family=Signika+Negative:300,400,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://asset.wemashup.com/wp-content/uploads/wm-asset-library/gsap/shared/normalize-5.0.0.min.css">
<link rel="stylesheet" href="https://asset.wemashup.com/wp-content/uploads/wm-asset-library/gsap/shared/xxmzBrw.css">
<style>

</style></head><body>
<div class="description panel">
  <h1>Layered pinning with infinite looping</h1>
    <p>Use pinning to layer panels on top of each other as you scroll.</p>
    <div class="scroll-down"><div class="arrow"></div></div>

</div>


<section class="panel green">
	<h2 class="panel__number">1</h2>
</section>
<section class="panel">
	<h2 class="panel__number">2</h2>
</section>
<section class="panel purple">
	<h2 class="panel__number">3</h2>
</section>
<section class="panel">
	<h2 class="panel__number">4</h2>
</section>
<section class="panel blue">
	<h2 class="panel__number">5</h2>
</section>

<script src="https://asset.wemashup.com/wp-content/uploads/wm-asset-library/gsap/shared/gsap-3.15.0-gsap.min.js"></script>
<script src="https://asset.wemashup.com/wp-content/uploads/wm-asset-library/gsap/shared/gsap-3.15.0-ScrollTrigger.min.js"></script>
<script src="https://asset.wemashup.com/wp-content/uploads/wm-asset-library/gsap/shared/7ba936b34824fefdccfe2c6d9f0b740b.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);

let panels = gsap.utils.toArray(".panel"),
    copy = panels[0].cloneNode(true);
panels[0].parentNode.appendChild(copy); // copy the first panel to the end (for seamless looping)

panels.forEach((panel, i) => {
  ScrollTrigger.create({
    trigger: panel,
    start: "top top", 
    pin: true, 
    pinSpacing: false 
  });
});

let maxScroll;
let pageScrollTrigger = ScrollTrigger.create({ // snap whole page to the closest section!
  // normally we'd just do snap: 1 / panels.length but we'll use a function-based value so that we can handle the very start and end values in a special way to prevent looping on the snap
  snap(value) {
    let snappedValue = gsap.utils.snap(1 / panels.length, value);
    if (snappedValue <= 0) { // don't let it go all the way back to exactly 0 or it'll wrap. Keep it a bit more than 1px from the top.
      return 1.05 / maxScroll;
    } else if (snappedValue >= 1) { // don't let it go all the way to the end or it'll wrap. Keep it a bit more than 1px from the bottom. 
      return maxScroll / (maxScroll + 1.05);
    }
    return snappedValue;
  }  
});
function onResize() {
  maxScroll = ScrollTrigger.maxScroll(window) - 1;
}
onResize();
window.addEventListener("resize", onResize);
// make sure we use a non-passive event listener so that we can preventDefault() on the scroll if it's at the very top or bottom
window.addEventListener("scroll", e => {
  let scroll = pageScrollTrigger.scroll()
  if (scroll > maxScroll) {
    pageScrollTrigger.scroll(1);
    e.preventDefault();
  } else if (scroll < 1) {
    pageScrollTrigger.scroll(maxScroll - 1);
    e.preventDefault();
  }
}, {passive: false});


</script>
</body></html>

<div class="description panel">
  <h1>Layered pinning with infinite looping</h1>
    <p>Use pinning to layer panels on top of each other as you scroll.</p>
    <div class="scroll-down"><div class="arrow"></div></div>

</div>


<section class="panel green">
	<h2 class="panel__number">1</h2>
</section>
<section class="panel">
	<h2 class="panel__number">2</h2>
</section>
<section class="panel purple">
	<h2 class="panel__number">3</h2>
</section>
<section class="panel">
	<h2 class="panel__number">4</h2>
</section>
<section class="panel blue">
	<h2 class="panel__number">5</h2>
</section>

gsap.registerPlugin(ScrollTrigger);

let panels = gsap.utils.toArray(".panel"),
    copy = panels[0].cloneNode(true);
panels[0].parentNode.appendChild(copy); // copy the first panel to the end (for seamless looping)

panels.forEach((panel, i) => {
  ScrollTrigger.create({
    trigger: panel,
    start: "top top", 
    pin: true, 
    pinSpacing: false 
  });
});

let maxScroll;
let pageScrollTrigger = ScrollTrigger.create({ // snap whole page to the closest section!
  // normally we'd just do snap: 1 / panels.length but we'll use a function-based value so that we can handle the very start and end values in a special way to prevent looping on the snap
  snap(value) {
    let snappedValue = gsap.utils.snap(1 / panels.length, value);
    if (snappedValue <= 0) { // don't let it go all the way back to exactly 0 or it'll wrap. Keep it a bit more than 1px from the top.
      return 1.05 / maxScroll;
    } else if (snappedValue >= 1) { // don't let it go all the way to the end or it'll wrap. Keep it a bit more than 1px from the bottom. 
      return maxScroll / (maxScroll + 1.05);
    }
    return snappedValue;
  }  
});
function onResize() {
  maxScroll = ScrollTrigger.maxScroll(window) - 1;
}
onResize();
window.addEventListener("resize", onResize);
// make sure we use a non-passive event listener so that we can preventDefault() on the scroll if it's at the very top or bottom
window.addEventListener("scroll", e => {
  let scroll = pageScrollTrigger.scroll()
  if (scroll > maxScroll) {
    pageScrollTrigger.scroll(1);
    e.preventDefault();
  } else if (scroll < 1) {
    pageScrollTrigger.scroll(maxScroll - 1);
    e.preventDefault();
  }
}, {passive: false});