Zenn
🔰

AnimateOnScrollであっさりスクロール演出

2023/10/30に公開
JavaScript
初心者
初心者向け
#
プログラミング初心者
tech

AnimateOnScrollとは!?

AnimateOnScroll(以下AOS)を利用する事で、
スクロールに反応する演出をいとも簡単に実装することができます。

AnimateOnScroll

今回はこのライブラリを使ってスクロールと連動した演出を試します。

プロジェクトを用意する

次の様にプロジェクトを作ります。

MyProject01/
　├ images (画像ファイルを格納するフォルダです)
　├ index.html (プログラムを起動するファイルです)
　├ custom.css (CSSを記述するファイルです)
　├ main.js (メインのプログラムを記述するファイルです)


logo.png

HTMLファイルを用意する

では、作っていきましょう。
用意したHTMLファイルにAOS用のライブラリを読み込むコードを記述します。
(既に完成コードです!!)

ファイル名 用途
aos.css AOS用CSSファイル
aos.js AOS用jsファイル
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8"/>
	<title>AnimateOnScroll</title>
	<!-- CSS -->
	<link rel="stylesheet" href="//unpkg.com/aos@2.3.1/dist/aos.css">
	<link rel="stylesheet" href="./custom.css">
</head>
<body>
	<div id="my_container">
		<h1>AnimateOnScroll</h1>
		<h2>Let's fade!!</h2>
		<p>Fade up!!</p>
		<div data-aos="fade-up">
			<img src="./images/logo.png">
		</div>
	</div>
	<!-- JavaScript -->
	<script src="//code.jquery.com/jquery-3.6.1.min.js"></script>
	<script src="//unpkg.com/aos@2.3.1/dist/aos.js"></script>
	<script src="./main.js"></script>
</body>
</html>

CSSファイルを用意する

次はCSSファイルです。
ひよこの画像を中央に合わせる程度のコードです。

custom.css
html, body{
	width: 100%; height: 100%;
	margin: 0px; padding: 0px;
	background-color: khaki;
}

#my_container{
	width: 100%; height: auto;
	margin: auto; padding: 0px;
	text-align: center;
}

#my_container div{
	width: 256px; height: 128px;
	margin: 10px auto; padding: 0px;
	background-color: lightblue;
	text-align: center;
}

JavaScriptファイルを用意する

最後はJavaScriptファイルです。
AOSを初期化するコードを1行記述します。
(これだけです!!)

main.js
// Ready
$(document).ready(()=>{
	console.log("Ready!!");
	AOS.init();// AOSを初期化します
});

実行すると、ひよこの画像がフェードインする演出を確認することができます。
(やりました!!)

演出の指定方法とその種類

演出をさせたいタグのアトリビュート"data-aos"に、
アニメーションの種類を指定するだけです。
(もうおわかりですね!!)

index.html
<div data-aos="fade-up">
	<img src="./images/logo.png">
</div>

"fede-up"以外の演出は次の通りです。
(試してみましょう!!)

ファイル名 用途
fade-up フェードイン(下から上)
fade-down フェードイン(上から下)
fade-left フェードイン(右から左)
fade-right フェードイン(左から右)
flip-up フリップ(下から上)
flip-down フリップ(上から下)
flip-left フリップ(右から左)
flip-right フリップ(左から右)

AOSには他にも様々な演出が用意されています。
公式サイトを確認してみてくださいね。

終わりにいろいろ詰め込んでみました。(やりました!!)

最後に

今回はAOSを利用して、スクロールと連動するアニメーションを実装しました。
「圧倒的に簡単だな〜」と思っていただけると幸いです。
ここまで読んでいただき有難うございました。

Discussion