パーツ番号 01-13-05 ・ JavaScript使用

逆方向パララックス分割セクション

内部エリアをスクロールすると、左右のコンテンツが逆方向に流れる分割セクション。ブランドサイトのストーリーテリング演出に向いています（内部スクロールで動作）。

scrollautojs

プレビュー

ソースコード

HTML

<div class="d01-13-05-wrap">
          <div class="d01-13-05-cols">
            <div class="d01-13-05-col d01-13-05-col-l">
              <div class="d01-13-05-track d01-13-05-track-l">
                <p>PLANNING</p><p>DESIGN</p><p>BUILD</p><p>LAUNCH</p><p>GROWTH</p>
              </div>
            </div>
            <div class="d01-13-05-col d01-13-05-col-r">
              <div class="d01-13-05-track d01-13-05-track-r">
                <p>企画</p><p>設計</p><p>制作</p><p>公開</p><p>改善</p>
              </div>
            </div>
          </div>
          <div class="d01-13-05-spacer"></div>
        </div>

CSS

.prev.d01-13-05{padding:0}
        .d01-13-05-wrap{position:relative;width:100%;height:230px;overflow-y:auto;overflow-x:hidden;background:#0f172a}
        .d01-13-05-cols{position:sticky;top:0;left:0;width:100%;height:230px;display:flex}
        .d01-13-05-col{flex:1;position:relative;overflow:hidden}
        .d01-13-05-col-l{border-right:1px solid rgba(255,255,255,.14)}
        .d01-13-05-track{position:absolute;left:0;right:0;top:24px;display:flex;flex-direction:column;align-items:center;gap:20px}
        .d01-13-05-track p{margin:0;color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.05em;opacity:.85}
        .d01-13-05-spacer{height:520px}

JavaScript

(function(){
        var root=document.getElementById('item-01-13-05');if(!root)return;
        var wrap=root.querySelector('.d01-13-05-wrap');
        var trackL=root.querySelector('.d01-13-05-track-l');
        var trackR=root.querySelector('.d01-13-05-track-r');
        wrap.addEventListener('scroll',function(){
          var t=wrap.scrollTop;
          trackL.style.transform='translateY('+(-t*0.7)+'px)';
          trackR.style.transform='translateY('+(t*0.7-180)+'px)';
        });
      })();

クラス名 .d01-13-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。