ちょっと前に、自分が携わっているサイトの1つで、スクロール時のエフェクトを実装する機会があったんですが、どうもスクロール時のエフェクトの発動タイミングが気に入らないらしく、仕事依頼先からは、結局エフェクトを外して欲しいと言われ外したことがあります。
自分からすると、そこまで遅くはないと、その時は思ったのですが、そのへんのスピード感は個人によって感じ方が確かに違うとは分かっています。
でも、せっかく苦労して実装したエフェクトが外されると、ちょっとテンション下がります・・・。特に、意図してユーザーの目を引き付けるために入れたエフェクトだったので。
最近の体験だったので、このエフェクトの記事が目に止まったので、自分の忘却録としても書いておこうと思います。
jQueryは不要
「jQueryは不要」・・・ここは自分の中では大きい要素でした。先に書いたように、エフェクトの動きに物申されたので、jQueryに依存しないという軽量のライブラリは、非常に助かります。
外部ファイルとして、ヘッダーに2行追加して、classを与えるだけ。
AOSの利用方法
head内の記述(外部ファイルの読み込み)
スクリプトとスタイルシートをヘッダー内で読み込んでください。
// // //
JavaScriptの記述
スクリプトを初期化するための記述。の直前にでも記述しておけば大丈夫だと思います。
JHTML内での記述
あとはアニメーションを付けたい要素にclass指定してください。
例えば、右からフェードインして入ってくるのとか、
こんな感じでオプションも付けれます。
オプションは複数同時につけることも可能です。
さいごに
ほかにも、いろいろとオプションやエフェクト効果がありますので、もし軽くて少しでもスピード感を持ってエフェクトを付けたい方は、是非試してみてください。
コメント