wow.js+animate.cssでスクロール連動アニメーション

てっちゃん
てっちゃん

スクロールするときにちょっとしたアニメーションを付けると動きがでて楽しさが増しますよね！
今回はwow.jsを使ってAnimate.cssで動きを加えてみます！

アニメーションはAnimate.cssのページから好きなものを選んでください
https://animate.style/

デモページ

STEP01

まずは下準備です。
「wow.js」と「animate.css」をGitHubからダウンロードしてきます。

wow.js
https://github.com/matthieua/WOW
wow.js

animate.css
https://github.com/animate-css/animate.css
animate.css

ダウンロードしてきた「wow.js」と「animate.css」をそれぞれ任意のフォルダへ格納して、html上に読み込んでおきます。
<head>内に下記を入れます。
※jQueryは不要です

HTML<head>内

<link rel="stylesheet" href="css/animate/animate.css">
<script src="js/wow/wow.js"></script>
<script>
	new WOW().init();
</script>

STEP02

これで下準備が整ったので、あとは動きを付けたい箇所に以下のclassを追加していくだけです！

HTML

<ul>
	<li class="wow animate__animated animate__bounce">BOUNCE01</li>
	<li class="wow animate__animated animate__bounce">BOUNCE02</li>
	<li class="wow animate__animated animate__bounce">BOUNCE03</li>
	<li class="wow animate__animated animate__bounce">BOUNCE04</li>
	<li class="wow animate__animated animate__bounce">BOUNCE05</li>
	<li class="wow animate__animated animate__bounce">BOUNCE06</li>
	<li class="wow animate__animated animate__bounce">BOUNCE07</li>
	<li class="wow animate__animated animate__bounce">BOUNCE08</li>
	<li class="wow animate__animated animate__bounce">BOUNCE09</li>
</ul>

これだけで完成～
classにwowを読み込んでjsを動かします。
同じくclassにanimate__animated animate__bounceを読み込んで【bounce】アニメーションを付けます。

冒頭でも紹介しましたが、アニメーションはAnimate.cssのページから好きなのを選んでください！
※Animate.cssのバージョンによってはclass名の書き方が異なる場合がありますので、都度確認が必要です。今回のバージョンは4.1.1です

デモページ

オプション

アニメーションに時間差をつけたい場合はdata-wow-delayを付けるだけでOK！
とってもカンタンですね～

デモページのソースコードは以下の通りです＾＾

デモページ

HTML

<div id="pattern01">
	<h2>animate【bounce】</h2>
	<ul>
		<li class="wow animate__animated animate__bounce" data-wow-delay=".1s">BOUNCE01</li>
		<li class="wow animate__animated animate__bounce" data-wow-delay=".2s">BOUNCE02</li>
		<li class="wow animate__animated animate__bounce" data-wow-delay=".3s">BOUNCE03</li>
		<li class="wow animate__animated animate__bounce" data-wow-delay=".3s">BOUNCE04</li>
		<li class="wow animate__animated animate__bounce" data-wow-delay=".4s">BOUNCE05</li>
		<li class="wow animate__animated animate__bounce" data-wow-delay=".5s">BOUNCE06</li>
		<li class="wow animate__animated animate__bounce" data-wow-delay=".5s">BOUNCE07</li>
		<li class="wow animate__animated animate__bounce" data-wow-delay=".6s">BOUNCE08</li>
		<li class="wow animate__animated animate__bounce" data-wow-delay=".7s">BOUNCE09</li>
	</ul>
</div>
<div id="pattern02">
	<h2>animate【jello】</h2>
	<ul>
		<li class="wow animate__animated animate__jello" data-wow-delay=".3s">JELLO01</li>
		<li class="wow animate__animated animate__jello" data-wow-delay=".6s">JELLO02</li>
		<li class="wow animate__animated animate__jello" data-wow-delay=".9s">JELLO03</li>
		<li class="wow animate__animated animate__jello" data-wow-delay=".3s">JELLO04</li>
		<li class="wow animate__animated animate__jello" data-wow-delay=".6s">JELLO05</li>
		<li class="wow animate__animated animate__jello" data-wow-delay=".9s">JELLO06</li>
		<li class="wow animate__animated animate__jello" data-wow-delay=".3s">JELLO07</li>
		<li class="wow animate__animated animate__jello" data-wow-delay=".6s">JELLO08</li>
		<li class="wow animate__animated animate__jello" data-wow-delay=".9s">JELLO09</li>
	</ul>
</div>
<div id="pattern03">
	<h2>animate【bounceIn】</h2>
	<ul>
		<li class="wow animate__animated animate__bounceIn" data-wow-delay=".3s">BOUNCEIN01</li>
		<li class="wow animate__animated animate__bounceIn" data-wow-delay=".6s">BOUNCEIN02</li>
		<li class="wow animate__animated animate__bounceIn" data-wow-delay=".9s">BOUNCEIN03</li>
		<li class="wow animate__animated animate__bounceIn" data-wow-delay=".3s">BOUNCEIN04</li>
		<li class="wow animate__animated animate__bounceIn" data-wow-delay=".6s">BOUNCEIN05</li>
		<li class="wow animate__animated animate__bounceIn" data-wow-delay=".9s">BOUNCEIN06</li>
		<li class="wow animate__animated animate__bounceIn" data-wow-delay=".3s">BOUNCEIN07</li>
		<li class="wow animate__animated animate__bounceIn" data-wow-delay=".6s">BOUNCEIN08</li>
		<li class="wow animate__animated animate__bounceIn" data-wow-delay=".9s">BOUNCEIN09</li>
	</ul>
</div>
<div id="pattern04">
	<h2>animate【fadeInUp】</h2>
	<ul>
		<li class="wow animate__animated animate__fadeInUp" data-wow-delay=".3s">FADEINUP01</li>
		<li class="wow animate__animated animate__fadeInUp" data-wow-delay=".6s">FADEINUP02</li>
		<li class="wow animate__animated animate__fadeInUp" data-wow-delay=".9s">FADEINUP03</li>
		<li class="wow animate__animated animate__fadeInUp" data-wow-delay=".3s">FADEINUP04</li>
		<li class="wow animate__animated animate__fadeInUp" data-wow-delay=".6s">FADEINUP05</li>
		<li class="wow animate__animated animate__fadeInUp" data-wow-delay=".9s">FADEINUP06</li>
		<li class="wow animate__animated animate__fadeInUp" data-wow-delay=".3s">FADEINUP07</li>
		<li class="wow animate__animated animate__fadeInUp" data-wow-delay=".6s">FADEINUP08</li>
		<li class="wow animate__animated animate__fadeInUp" data-wow-delay=".9s">FADEINUP09</li>
	</ul>
</div>

関連記事