縦スクロールで横移動するJS

縦スクロールで横移動

まったりとクリクリ上下スクロールしているだけで、指定部分のみ左右に移動する（GSAP使用）

↓↓↓ 上下にスクロールして動作確認 ↑↑↑

1
2
3
4
5
6
7

ソースコード


<section class="items"><span>1</span></section>
<section class="items"><span>2</span></section>

<div class="js-area">
	<div class="js-wrap">
		<section class="items js-item"><span>3</span></section>
		<section class="items js-item"><span>4</span></section>
		<section class="items js-item"><span>5</span></section>
	</div>
</div>

<section class="items"><span>6</span></section>
<section class="items"><span>7</span></section>


<style>
.js-area {
	overflow: hidden;
	}
.js-wrap {
	display: flex;
	}
.items {
	min-height: 100vh;

	/* 以下は内容に合わせて変える -------------------------- */
	display: flex;
	justify-content: center;
	align-items: center;
	}
.items span { font-size: 50px; font-weight: bold;}
.items:nth-child(odd){ background: #eee; color: #666;}
.items:nth-child(even){ background: #aaa; color: #fff;}
</style>


<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script>
<script>
window.addEventListener("load", function(){

  //プラグインを定義
  gsap.registerPlugin(ScrollTrigger);

  const area  = document.querySelector(".js-area");
  const wrap  = document.querySelector(".js-wrap");
  const items = document.querySelectorAll(".js-item");
  const num   = items.length;

  //横幅を指定
  gsap.set(wrap,  { width: num * 100 + "%" });
  gsap.set(items, { width: 100 / num + "%" });

  gsap.to(items, {
    xPercent: -100 * ( num - 1 ),
    ease: "none",
    scrollTrigger: {
      trigger: area, //トリガー
      start: "top top",
      end: "+=1000",
      pin: true,
      scrub: true,
    }
  });
});
</script>

TOP