これは使える!スクロール時のエフェクト「AOS」

デザイン

ちょっと前に、自分が携わっているサイトの1つで、スクロール時のエフェクトを実装する機会があったんですが、どうもスクロール時のエフェクトの発動タイミングが気に入らないらしく、仕事依頼先からは、結局エフェクトを外して欲しいと言われ外したことがあります。

自分からすると、そこまで遅くはないと、その時は思ったのですが、そのへんのスピード感は個人によって感じ方が確かに違うとは分かっています。

でも、せっかく苦労して実装したエフェクトが外されると、ちょっとテンション下がります・・・。特に、意図してユーザーの目を引き付けるために入れたエフェクトだったので。

最近の体験だったので、このエフェクトの記事が目に止まったので、自分の忘却録としても書いておこうと思います。

jQueryは不要

「jQueryは不要」・・・ここは自分の中では大きい要素でした。先に書いたように、エフェクトの動きに物申されたので、jQueryに依存しないという軽量のライブラリは、非常に助かります。

外部ファイルとして、ヘッダーに2行追加して、classを与えるだけ。

aos002

デモページはこちら

AOSの利用方法

head内の記述(外部ファイルの読み込み)

スクリプトとスタイルシートをヘッダー内で読み込んでください。


//
    
//



//
    

JHTML内での記述

あとはアニメーションを付けたい要素にclass指定してください。

例えば、右からフェードインして入ってくるのとか、

こんな感じでオプションも付けれます。

オプションは複数同時につけることも可能です。

さいごに

ほかにも、いろいろとオプションやエフェクト効果がありますので、もし軽くて少しでもスピード感を持ってエフェクトを付けたい方は、是非試してみてください。

sanpo-zukan

sanpo-zukan

ストアカで『【オンライン★初心者向け】気軽で楽しくワードプレスのお悩み相談教室( https://www.street-academy.com/myclass/78668 )』運営中!

関連記事

オススメ2

コメント

この記事へのコメントはありません。

CAPTCHA


TOP
CLOSE