jQuery不要!簡単にスクロールアニメーションを実現できるAOSを使おう

  • はてブ

img1
サイトへ Github

Webサイトで画面をスクロールすると、要素がフェード等のエフェクトがかかって出てくることがありますよね。
jQueryを使うことが主だと思うのですが、『AOS』を使うとjQuery不要で実装ができます。

AOSの使い方

とりあえずサイトからcssとjsをダウンロード、またはCDNでも配布されているのでそちらを読み込みます。

CSSの読み込み


jsの読み込み


CSSはhead内に、jsはbody内で読み込ませてください。
あとは読み込ませた後ろにAOS.init()の記述をして初期化、使用することができます。

HTML


HTMLの記述はこのようになります。
要素に対して『data-aos=』を使いアニメーションを指定します。
アニメーションはサイトを参考にしてください。十分な量のアニメーションが用意されています。

上記のもので作ったデモはこちらです。

DEMO


style="display:block"
data-ad-client="ca-pub-4667789978705365"
data-ad-slot="9480048027"
data-ad-format="auto">


その他にもオプションが用意されていますので、必要に応じて指定していきます。

属性 使い方 デフォルト
data-aos-offset 開始位置の設定(px単位) 120
data-aos-duration アニメーションの長さ(ミリ妙単位) 400
data-aos-easing アニメーションの仕方(ease-in-sine等) ease
data-aos-delay アニメーションのタイミングを遅らせる秒数(ミリ妙単位) 0
data-aos-anchor 開始位置を他の要素にするか null
data-aos-anchor-placement アニメーション開始位置の調整 top-bottom
data-aos-once アニメーションを1回だけにするか false

まとめると大体こんな感じになります。


1個1個指定しないでまとめたい場合は、js部分の記述を変更します。





とても軽く、最初から様々なアニメーションやオプションが用意されているため使いやすい『AOS』
アニメーションが必要な際はぜひ導入してみてください。

工藤

執筆者: 工藤

日々勉強中です。どうぞよろしくお願いします。

株式会社8bit (エイトビット)

東京都渋谷区でWebサイト制作、Webシステム開発などを行っております。
キャンペーンサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

制作に関するご相談はお気軽にどうぞ

コンペ参加や相談ベースでもご相談承っております。

お問い合わせ