【jQuery】これ見りゃ簡単！しかも無料！？スクロールに連動するアニメーションの実装方法

公開日 2021/8/13 最終更新日 2022/1/13

こんな感じの「フワッ」とアニメーションを簡単に実装できます！

Web制作コース中級編「DAY 21 スクロールに応じて要素を「フワッ」と登場させる」をクリアしました。 https://t.co/1hjb04hEj6 #デイトラ #WEB制作デイトラ #webデザイナーさんと繋がりたい pic.twitter.com/gbURCUGuZ0
— やま@兼農コーダー💻🧑‍🌾 (@noukanaruo) July 10, 2021

ダウンロード

まずはzipファイルをダウンロード

Githubで管理されています。
↓よりダウンロード
https://github.com/matthieua/WOW

本家は有料なので、今回は無料版で実装していきます。

使いかた

１．フォルダを移動する

”animate.css”と”wow.min.js”を作成中のフォルダに移動させます。
例：animate.cssはcssフォルダのなか、wow.min.jsはjsフォルダのなかに移動

”wow.min.js”は”wow.js”でも大丈夫ですよ。
※wow.min.jsはwow.jsの圧縮版

２．HTMLに追記

HTMLにjQueryライブラリを読み込んでから、CSSとJSを読み込む。
”←ココ”って書いてある部分が追記部分です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/animate.css">←ココ

</head>
・
・
・
<body>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>←ココ
  <script src="./js/wow.min.js"></script>←ココ
  <script>←ココ
    new WOW().init();←ココ
  </script>←ココ

</body>
</html>

↑WOWより先にjQueryを読み込んでください

WOW使いますよって宣言しないと使えないので注意してください〜
↓この部分

<script>
    new WOW().init();
</script>

３．アニメーションを指定

使いたいアニメーションを指定します。
class名を追加すれば動きまっせ。

<div class="wow bounceIn">バウントします</div>

”WOW”がスクロールで発動するトリガーみたいな役割で
”bounceIn”でアニメーションの指定しています。

アニメーションの種類

こちらにアニメーション一覧があります。

fadeUpとか頻出、定番ものも揃ってまっせ。

まとめ

自力で実装するより圧倒的に手軽に実装できるWOWのご紹介でした。
簡単とかいって初めて実装するときはnew WOW().init();をどこに書けばいいか分からず迷走してました笑

皆さんは気をつけて！

では！

タグ

css

HTML

jQuery

pickup

wow

アニメーション