MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
【JSプラグイン】スクロール連動型アニメーション!jQuery不要のJSプラグイン「AOS」!

【JSプラグイン】スクロール連動型アニメーション!jQuery不要のJSプラグイン「AOS」!

公開日:2017年07月17日
最終更新日:2022年01月17日
オンスタ運営
プログラミング
Webデザイン
ホーム > 全記事一覧 > 制作 > エンジニア > マークアップ > 【JSプラグイン】スクロール連動型アニメーション!jQuery不要のJSプラグイン「AOS」!

Warning: Undefined variable $_cat_enginieer_flag in /home/growgroup/online-study.jp/public_html/wp-content/themes/online-study-wp/views/object/components/related-posts-inline.php on line 37
このエントリーをはてなブックマークに追加
【JSプラグイン】スクロール連動型アニメーション!jQuery不要のJSプラグイン「AOS」!
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

こんにちは
GORILLA-Yです!

さてさて今回はjQueryを使った
スクロール連動で素敵なアニメーションを足してくれるプラグイン「AOS(Animation On Scroll library)」をご紹介!!
スクロールした時にニュンニュン表示するエフェクト、よく見かけますが、
そんなアニメーションを簡単に実装させてくれるこのプラグイン!
使い方がとってもシンプルでわかりやすく、さらにjQuery不要で動くのでとってもいい感じです♪
ご利用のWEBサイトに導入いかがでしょう?

というわけで今回は『jQuery不要のプラグイン「AOS」の入手方法と設置方法』
です〜
よろしくどうぞ〜

 

ファイルの入手と設置

何はともあれ、まずはファイルを入手しましょう

必要なファイルは本体ファイルのjsとcssファイル。
ですCDN、Githubで配信しているようですので、
そちらから入手しましょう!

Github
https://github.com/michalsnik/aos

手っ取り早く行きたいとこですので、
今回はCDNから読み込みます。

 

実際に使ってみる

JSで「AOS.init()」と記述し、
「data-aos」というdata属性をhtmlに追加していけば
あら不思議、もう起動しますね!

こんな感じでエフェクトを追加していけます!
他にもFlipやZoomなど種類もありますが、こちらはgithubでどうぞ

Github
https://michalsnik.github.io/aos/

また、細かいセッティングも可能です。
セッティングは以下

data-aos-offset 開始位置の設定
data-aos-duration どれくらいの時間をかけてアニメーションさせるか
(数字が大きいほどゆっくりです)
data-aos-easing アニメーションの仕方(linearとか)
data-aos-delay アニメーションを起動させるタイミングを遅延させる
data-aos-once 1回だけ実行するかどうか
data-aos-anchor 開始位置を他の要素に指定する
data-aos-anchor-placement 開始するスクロールの位置を調整

上記を使ってまとめて指定する場合は以下の感じでできます

こちらのdata属性を使ったセッティングについての挙動は、
githubでサンプル付きで細かく公開されてますんでご参照ください。

Github
https://michalsnik.github.io/aos/
https://github.com/michalsnik/aos

 

まとめ

いかがでしたか?
アニメーション部分の多くをCSS3でまかなっているので、
jQueryコードで実装してしまうと重くなりがちな
アニメーションが、軽量なまま導入できるので
重宝しますよね!

みなさんぜひ、一度お試しくださいませ〜

以上、GORILLA-Yでした!


【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ


Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
Scratchなら遊び感覚で学べる!サービスの特徴やメリットをピックアップ
プログラミング
公開日: 2019年08月04日
最終更新日: 2022年01月17日
Scratchなら遊び感覚で学べる!サービスの特徴やメリットをピックアップ
  • # Scratch
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
[JavaScript_中級者への道] プロトタイプについて – [3] 身近な機能を実装してみる
プログラミング
公開日: 2020年02月19日
最終更新日: 2022年01月17日
[JavaScript_中級者への道] プロトタイプについて – [3] 身近な機能を実装してみる
  • # ES6
  • # JavaScript
  • # プロトタイプ
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
requestAnimationFrameの基本的な書き方と使用例を学んでみた。
テクノロジー
プログラミング
公開日: 2021年06月30日
最終更新日: 2021年06月30日
requestAnimationFrameの基本的な書き方と使用例を学んでみた。
d.kitahama

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
これがあればデザイナーは助かる!修正を最小限に抑えるためのデザインディレクション
Webデザイン
デザイン
公開日: 2016年12月08日
最終更新日: 2022年01月17日
これがあればデザイナーは助かる!修正を最小限に抑えるためのデザインディレクション
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【コーディング】実装に悩んだ時に使える便利なCSSテクニック
Webデザイン
マークアップ
公開日: 2018年02月09日
最終更新日: 2018年02月09日
【コーディング】実装に悩んだ時に使える便利なCSSテクニック
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
現場で働いているからわかる!人気プログラミング言語を徹底比較
プログラミング
公開日: 2019年07月10日
最終更新日: 2019年07月10日
現場で働いているからわかる!人気プログラミング言語を徹底比較
  • # プログラミング言語
  • # 比較
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
CSVを使ってWordPressの投稿、カスタム投稿へ記事データを流し込む方法(Really Simple CSV Importer)
WordPress
エンジニア
プログラミング
制作
公開日: 2019年10月31日
最終更新日: 2022年01月17日
CSVを使ってWordPressの投稿、カスタム投稿へ記事データを流し込む方法(Really Simple CSV Importer)
  • # Really Simple CSV Importer
  • # WordPress
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【仮想環境構築】Vagrant + VirtualBoxで「作って壊せる」テスト環境を作ってみよう!
システム
テクノロジー
プログラミング
公開日: 2018年03月16日
最終更新日: 2018年03月16日
【仮想環境構築】Vagrant + VirtualBoxで「作って壊せる」テスト環境を作ってみよう!
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
知っておきたい!Photoshopを使ってできることを大公開
Webデザイン
公開日: 2019年06月14日
最終更新日: 2022年01月17日
知っておきたい!Photoshopを使ってできることを大公開
  • # Photoshop
  • # pickup
  • # できること
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
シンプルなデザインについて考えてみる
Webデザイン
デザイン
公開日: 2017年07月25日
最終更新日: 2022年01月17日
シンプルなデザインについて考えてみる
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。