パララックス二重見出し

<div class="d02-08-09-stage">
          <span class="d02-08-09-hint">↓ scroll</span>
          <div class="d02-08-09-scroll">
            <div class="d02-08-09-layer-wrap">
              <span class="d02-08-09-back">CREATIVE</span>
              <span class="d02-08-09-front">STUDIO</span>
            </div>
            <p class="d02-08-09-caption">SINCE 2016 — 二重見出しが異なる速度でずれながらスクロールします</p>
          </div>
        </div>

.prev.d02-08-09{padding:0;display:block}
        .d02-08-09-stage{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:linear-gradient(160deg,#111827,#1f2937)}
        .d02-08-09-hint{position:absolute;top:10px;right:14px;font-size:10px;letter-spacing:.1em;color:rgba(255,255,255,.4);pointer-events:none;z-index:3}
        .d02-08-09-scroll{position:absolute;inset:0;overflow-y:auto}
        .d02-08-09-layer-wrap{position:relative;height:420px}
        .d02-08-09-back{
          position:absolute;top:70px;left:22px;font-size:56px;font-weight:800;
          color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.22);
          letter-spacing:.01em;white-space:nowrap;will-change:transform;
        }
        .d02-08-09-front{
          position:absolute;top:130px;left:34px;font-size:34px;font-weight:800;
          color:#fff;letter-spacing:.06em;white-space:nowrap;will-change:transform;
        }
        .d02-08-09-caption{
          margin:0;padding:16px 24px 130px;font-size:11px;letter-spacing:.05em;
          color:rgba(255,255,255,.5);
        }

(function(){
        var scroller = document.querySelector('#item-02-08-09 .d02-08-09-scroll');
        var back = document.querySelector('#item-02-08-09 .d02-08-09-back');
        var front = document.querySelector('#item-02-08-09 .d02-08-09-front');
        if(!scroller || !back || !front) return;
        function update(){
          var top = scroller.scrollTop;
          back.style.transform = 'translateY(' + (-top * 0.28).toFixed(1) + 'px)';
          front.style.transform = 'translateY(' + (top * 0.42).toFixed(1) + 'px)';
        }
        scroller.addEventListener('scroll', update, {passive:true});
        update();
      })();