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

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

滲みフェードイン本文

ぼかしと字間の広がりが、行がスクロールで進入するにつれ連続的に収束し、インクが滲むように文字がくっきりしていきます。理念紹介文やストーリーページに。

scrolljs

プレビュー

ソースコード

HTML

<div class="d02-08-05-stage">
          <span class="d02-08-05-hint">↓ scroll</span>
          <div class="d02-08-05-scroll">
            <div class="d02-08-05-pad-top"></div>
            <p class="d02-08-05-line">わたしたちは、余白を大切にものづくりをしています。</p>
            <p class="d02-08-05-line">急がず、ゆっくりと輪郭が見えてくるように。</p>
            <p class="d02-08-05-line">滲んだ言葉が、少しずつくっきりと形になっていきます。</p>
            <div class="d02-08-05-pad-bottom"></div>
          </div>
        </div>

CSS

.prev.d02-08-05{padding:0;display:block}
        .d02-08-05-stage{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#f6f2ea}
        .d02-08-05-hint{position:absolute;top:10px;right:14px;font-size:10px;letter-spacing:.1em;color:#a58a5c;pointer-events:none;z-index:2}
        .d02-08-05-scroll{position:absolute;inset:0;overflow-y:auto;padding:0 26px}
        .d02-08-05-pad-top{height:90px}
        .d02-08-05-pad-bottom{height:150px}
        .d02-08-05-line{
          margin:0 0 34px;font-size:16px;line-height:1.9;color:#3b3226;
          opacity:0;filter:blur(6px);letter-spacing:.3em;
          will-change:opacity,filter,letter-spacing;
        }

JavaScript

(function(){
        var stage = document.querySelector('#item-02-08-05 .d02-08-05-stage');
        var scroller = document.querySelector('#item-02-08-05 .d02-08-05-scroll');
        if(!stage || !scroller) return;
        var lines = scroller.querySelectorAll('.d02-08-05-line');
        function update(){
          var stageRect = stage.getBoundingClientRect();
          for(var i = 0; i < lines.length; i++){
            var rect = lines[i].getBoundingClientRect();
            var fraction = (stageRect.bottom - rect.top) / (stageRect.height * 0.9);
            fraction = Math.min(Math.max(fraction, 0), 1);
            lines[i].style.opacity = fraction.toFixed(2);
            lines[i].style.filter = 'blur(' + ((1 - fraction) * 7).toFixed(1) + 'px)';
            lines[i].style.letterSpacing = ((1 - fraction) * 0.28).toFixed(3) + 'em';
          }
        }
        scroller.addEventListener('scroll', update, {passive:true});
        update();
      })();

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