これは使える!スクロール時のエフェクト「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


sanpo-zukan

sanpo-zukan

当サイト(さんぽずかん)を運営しています「しゃむ」です。 役立つ情報からしょうもないネタまで、少しでも読んだ人の役に立てばいいなと思って、いろいろな記事を掲載していきます!

最近の記事

  1. AIライター対決!ChatGPTとGoogleBardの違いを徹底解説

  2. まじ助かった!ありがたい!コロナ陽性で自宅療養していて助かった大阪府の支援

  3. WordPressの再利用可能ブロック管理ページにアクセスしやすくする方法

  4. PR

    イケてるWebマガジンをつくれるWordPressテーマ「CODE.」

    TCD

新着 オススメ 特集記事
  1. AIライター対決!ChatGPTとGoogleBardの違いを徹底解説

  2. まじ助かった!ありがたい!コロナ陽性で自宅療養していて助かった大阪府の支援

  3. WordPressの再利用可能ブロック管理ページにアクセスしやすくする方法

  1. まじ助かった!ありがたい!コロナ陽性で自宅療養していて助かった大阪府の支援

  2. Flexboxでjustify-content: space-betweenの最後の要素を左寄せにする方法

  3. しまった!アップグレードしたらサイトの表示が崩れた!!WordPressをダウングレードするカンタンな方法とは?

  1. AIライター対決!ChatGPTとGoogleBardの違いを徹底解説

  2. まじ助かった!ありがたい!コロナ陽性で自宅療養していて助かった大阪府の支援

  3. GoogleAdsenseで口座確認のデポジットがなかなか入金されなかったとき確認すべき点

TOP