つれづれなる備忘録

日々の発見をあるがままに綴る

トップ > HTML/CSS > ブログデザイン備忘録 ～ ScrollBtween

ブログデザイン備忘録 ～ ScrollBtween

HTML/CSS

ScrollBtweenはスクロールの位置に基づいてCSSプロパティを変化させるツール。

olivier3lanc.github.io

デモ例では、スクロールを送っていくと背景グラデーションが変化したり、テキストに効果を与えたりすることができる。

使い方はinstallationからscroll-btween.jsをダウンロードして

<script src="path/to/scroll-btween.js"></script>

のように読み込む。あとは見本を参考にしながら、パラメータを変更するとカスタマイズすることができる。

例えばグラデーションであれば以下のdata-backgroundのlinear-gradientの値を適宜変更すると色が変えられる。

<div    scroll-btween="bar"
        data-background="linear-gradient(|0 to 360|deg, rgba(|10 to 129|,94,|255 to 80|,1) 0%, rgba(252,|10 to 129|,|200 to 9|,1) 100%">
    <h2>Scroll to see background change</h2>
</div>

今回はCode Pen上で実装する関係で、scroll-btween.jsの中身をjsのタブに転記して使用する。 背景グラデーションとスターウォーズ風のテキスト送りを組み合わせて実装したものを以下に示す。 テキストサイズや背景のサイズdiv {height: 4000vh; }など一部変更したが、スクロールしていくとテキストがスターウォーズ風に送られつつ背景のグラデーションが変化する。

See the Pen test_scroll by ATATAT (@atatat) on CodePen.