

<html lang="ja">
  <head>
  <meta name=”robots” content=”noindex”>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width" />
  <meta name="format-detection" content="telephone=no" />
  <link rel="icon" href="https://img-flow.com/assets/img/common/favicon.ico">
  <title>デモ</title>
  <style>
  body{
    margin: 0;
  }
  .area{
    overflow: hidden;
  }
  .wrap{
    display: flex;
  }
  .item{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    font-weight: bold;
    color: #fff;
  }
  .item01{ background: #e94d15; }
  .item02{ background: #f18d1d; }
  .item03{ background: #f8b633; }
  .item04{ background: #8cc561; }
  .item05{ background: #56aa59; }
  .item06{ background: #3d6b35; }
  
  </style>
  <script src="/lp/src/gsap.js"></script>
  <script src="/lp/src/ScrollTrigger.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 ), //x方向に移動させる
      ease: "none",
      scrollTrigger: {
        trigger: area, //トリガー
        start: "top top", //開始位置
        end: "+=1000", //終了位置
        pin: true, //ピン留め
        scrub: true, //スクロール量に応じて動かす
      }
    });
  });
  </script>
  </head>
  <body>
  
    <div class="area0 js-area">
      <div class="wrap js-wrap">
        <div class="item item04 js-item"><span>4</span></div>
        <div class="item item05 js-item"><span>5</span></div>
        <div class="item item06 js-item"><span>6</span></div>
      </div>
    </div>



  <div class="item item01"><span>1</span></div>
  <div class="item item02"><span>2</span></div>
  <div class="item item03"><span>3</span></div>
  
  <div class="area js-area">
    <div class="wrap js-wrap">
      <div class="item item04 js-item"><span>4</span></div>
      <div class="item item05 js-item"><span>5</span></div>
      <div class="item item06 js-item"><span>6</span></div>
    </div>
  </div>
  
  <div class="item item01"><span>7</span></div>
  <div class="item item02"><span>8</span></div>
  <div class="item item03"><span>9</span></div>
  
  </body>
  </html>
  