こんな感じの「フワッ」とアニメーションを簡単に実装できます!
Web制作コース中級編「DAY 21 スクロールに応じて要素を「フワッ」と登場させる」をクリアしました。 https://t.co/1hjb04hEj6 #デイトラ #WEB制作デイトラ #webデザイナーさんと繋がりたい pic.twitter.com/gbURCUGuZ0
— やま@兼農コーダー💻🧑🌾 (@noukanaruo) July 10, 2021
目次
ダウンロード
まずはzipファイルをダウンロード
Githubで管理されています。
↓よりダウンロード
https://github.com/matthieua/WOW
本家は有料なので、今回は無料版で実装していきます。
使いかた
1.フォルダを移動する
”animate.css”と”wow.min.js”を作成中のフォルダに移動させます。
例:animate.cssはcssフォルダのなか、wow.min.jsはjsフォルダのなかに移動
”wow.min.js”は”wow.js”でも大丈夫ですよ。
※wow.min.jsはwow.jsの圧縮版
2.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>
3.アニメーションを指定
使いたいアニメーションを指定します。
class名を追加すれば動きまっせ。
<div class="wow bounceIn">バウントします</div>
”WOW”がスクロールで発動するトリガーみたいな役割で
”bounceIn”でアニメーションの指定しています。
アニメーションの種類
こちらにアニメーション一覧があります。
fadeUpとか頻出、定番ものも揃ってまっせ。
まとめ
自力で実装するより圧倒的に手軽に実装できるWOWのご紹介でした。
簡単とかいって初めて実装するときはnew WOW().init();をどこに書けばいいか分からず迷走してました笑
皆さんは気をつけて!
では!