CSS変数を利用したパララックスエフェクトをサポートするライブラリ・「basicScroll」

0

basicScroll

basicScrollはCSS変数を利用してスクロール時に要素にエフェクトを与える事で実装できるパララックス効果の導入をサポートしてくれるライブラリです。スクリプトはバニラで非依存なので使いやすいと思います。スクリプトで変数に値を入れてCSSで以下のように設定すればclass付与で設定したエフェクトを簡単に与えることができます。

.fadeBox { opacity: var(--o); }

従来の方法よりも軽量化出来そうですが、問題はブラウザですね。
以下はCSS変数のブラウザ対応状況です。

IEやOpera mini、昔のAndroid標準ブラウザでは使えません。本ライブラリは一応モバイルもサポートした設計となっているようです。Opera miniの利用率は把握していませんが、問題ないレベルなら導入もありかもしれませんね。Android標準ブラウザはもう無視で良い気がしますが、不安ならUAで判別して別ブラウザに促す措置をとれば良さそうですね。ライセンスはMITとの事です。

basicScroll

Share.

About Author

Comments are closed.