注目の記事 PICK UP!

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

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

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

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

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

jQueryは不要

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

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

aos002

デモページはこちら

AOSの利用方法

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

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

JavaScriptの記述

スクリプトを初期化するための記述。の直前にでも記述しておけば大丈夫だと思います。

JHTML内での記述

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

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

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

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

さいごに

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

関連記事

  1. あなたもクールなスライダーは好き?円が広がりながら画像が切り替わるスライダー

コメント

  • トラックバックは利用できません。

  • コメント (0)

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

CAPTCHA


人気記事 月間ランキング

特集記事

PAGE TOP