2018年02月16日(金)

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

• 0
• 2
• 3
• 21

basicScroll

See the Pen basicScroll Default Demo by Tobias Reich (@electerious) on CodePen.

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

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

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

Can I Use css-variables?

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