パーツ番号 02-02-10 ・ CSSのみ

縦スクロールワードリスト

キーワードが縦に無限スクロールし中央のラインで強調されます。WordPressの提供サービス一覧や実績タグをリズミカルに見せられます。

scrollautocss

プレビュー

ソースコード

HTML

<div class="d02-02-10-viewport">
          <ul class="d02-02-10-list">
            <li>デザイン</li><li>マーケティング</li><li>ブランディング</li><li>コンサル</li><li>開発</li>
            <li>デザイン</li><li>マーケティング</li><li>ブランディング</li><li>コンサル</li><li>開発</li>
          </ul>
          <div class="d02-02-10-mask"></div>
        </div>

CSS

.d02-02-10{background:#0f172a}
        .d02-02-10-viewport{position:relative;height:150px;width:220px;overflow:hidden;text-align:center;
          -webkit-mask-image:linear-gradient(transparent,#000 35%,#000 65%,transparent);
          mask-image:linear-gradient(transparent,#000 35%,#000 65%,transparent)}
        .d02-02-10-list{list-style:none;margin:0;padding:0;animation:d190scroll 8s linear infinite}
        .d02-02-10-list li{height:50px;line-height:50px;font-size:22px;font-weight:800;color:#64748b}
        .d02-02-10-mask{position:absolute;top:50px;left:0;right:0;height:50px;pointer-events:none}
        .d02-02-10-viewport:hover .d02-02-10-list{animation-play-state:paused}
        @keyframes d190scroll{0%{transform:translateY(0)}100%{transform:translateY(-250px)}}
        .d02-02-10-list li:nth-child(5n+3){color:#38bdf8}

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