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

デザイン

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

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

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

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

jQueryは不要

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

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

aos002

デモページはこちら

AOSの利用方法

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

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


//
    
//



//
    

JHTML内での記述

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

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

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

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

さいごに

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

sanpo-zukan

sanpo-zukan

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

関連記事

特集記事

コメント

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

CAPTCHA


sanpo-zukan

sanpo-zukan

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

最近の記事

  1. 唐辛子買ってきた。 #唐辛子|インスタからの投稿

  2. WordPress管理画面の投稿一覧で「タグ」の絞り込み表示をできるようにする方法

  3. スマホアプリのGoogleマップでダークモード使う方法

  4. PR

    【オンライン★初心者向け】気軽で楽しくワードプレスのお悩み相談教室

新着 オススメ 特集記事
  1. 唐辛子買ってきた。 #唐辛子|インスタからの投稿

  2. WordPress管理画面の投稿一覧で「タグ」の絞り込み表示をできるようにする方法

  3. スマホアプリのGoogleマップでダークモード使う方法

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

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

  3. サイト表示を少しでも早く!WordPressでJavascriptファイルを非同期にする方法

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

  2. サイト表示を少しでも早く!WordPressでJavascriptファイルを非同期にする方法

  3. ネコ好きLINEユーザー必見!懲りずに第二弾はスタンプ8個でお手軽LINEスタンプ!「ゆるかわミケにゃん」販売開始!

TOP