← 動的パーツギャラリーへ戻る

パーツ番号 02-08-06 ・ JavaScript使用

サイドから集まる引用文

左右にばらけていた文字が、スクロールするにつれて中央に吸い寄せられ、1つの引用文としてまとまります。お客様の声やコンセプトメッセージの見せ方に。

scrolljs

プレビュー

ソースコード

HTML

<div class="d02-08-06-stage">
          <span class="d02-08-06-hint">↓ scroll</span>
          <div class="d02-08-06-scroll">
            <div class="d02-08-06-pad-top"></div>
            <blockquote class="d02-08-06-quote">ここに、<span class="w">も</span><span class="w">の</span><span class="w">づ</span><span class="w">く</span><span class="w">り</span><span class="w">の</span><span class="w">誇</span><span class="w">り</span><span class="w">が</span><span class="w">あ</span><span class="w">る</span>。</blockquote>
            <div class="d02-08-06-pad-bottom"></div>
          </div>
        </div>

CSS

.prev.d02-08-06{padding:0;display:block}
        .d02-08-06-stage{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#fff}
        .d02-08-06-hint{position:absolute;top:10px;right:14px;font-size:10px;letter-spacing:.1em;color:#94a3b8;pointer-events:none;z-index:2}
        .d02-08-06-scroll{position:absolute;inset:0;overflow-y:auto;padding:0 26px}
        .d02-08-06-pad-top{height:150px}
        .d02-08-06-pad-bottom{height:150px}
        .d02-08-06-quote{
          margin:0;font-size:24px;font-weight:800;color:#1a2333;
          line-height:1.7;letter-spacing:.03em;font-style:normal;
        }
        .d02-08-06-quote .w{display:inline-block;opacity:0;will-change:transform,opacity}

JavaScript

(function(){
        var stage = document.querySelector('#item-02-08-06 .d02-08-06-stage');
        var scroller = document.querySelector('#item-02-08-06 .d02-08-06-scroll');
        if(!stage || !scroller) return;
        var words = scroller.querySelectorAll('.d02-08-06-quote .w');
        function update(){
          var max = scroller.scrollHeight - scroller.clientHeight;
          var progress = max > 0 ? Math.min(Math.max(scroller.scrollTop / max, 0), 1) : 0;
          for(var i = 0; i < words.length; i++){
            var side = i % 2 === 0 ? -1 : 1;
            var magnitude = 40 + (i * 9) % 70;
            var offset = side * magnitude * (1 - progress);
            words[i].style.transform = 'translateX(' + offset.toFixed(1) + 'px)';
            words[i].style.opacity = progress.toFixed(2);
          }
        }
        scroller.addEventListener('scroll', update, {passive:true});
        update();
      })();

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