2023

11/6

誰でも簡単にスクロールアニメーションをつける方法。「Gsap.js」

jQueryで機能拡張!!

2023年11月06日

2023年11月13日

animation

plugin

誰でも簡単にスクロールアニメーションをつける方法

スクロールアニメーションとは？

「Gsap.js」で実装できるアニメーション

「Gsap.js」デモ

「Gsap.js」実装

「Gsap.js」基本実装方法

「Gsap.js」カスタマイズ方法

スクロールアニメーションとは？

「Gsap.js」で実装できるアニメーション

「Gsap.js」デモ

「Gsap.js」実装

「Gsap.js」基本実装方法

「Gsap.js」カスタマイズ方法

はい！せんせい！たまに見るうっすら浮かび上がってくるアニメーションをつけたいんだけどどうやってやればいいの？？

さくや

せんせい

スクロールアニメーションのことかな。視覚効果もあるし、何よりおしゃれに見える素晴らしいアニメーションだよね。

そうなの！私jqueryがあまり得意じゃないから実装の仕方が全然わからなくて、、

さくや

せんせい

なるほどね。それならスクロールアニメーションを簡単に実装できる「Gsap.js」プラグインを紹介するからしっかり最後まで見て使いこなせるようになろうね。

はーい！！お願いします！

さくや

スクロールアニメーションとは？

スクロールアニメーションとは、ある一定量のスクロールをした場合に透明のコンテンツが徐々に表示されていくアニメーションのことです。最初の画面にコンテンツがない見やすい状態から、アニメーション付きでコンテンツが現れるので訪問者は必ずそのコンテンツに惹きつけられるでしょう。

スクロールアニメーションを実装しているだけでサイトのレベルは高く見えますし、性質上色々なサイトで使うことができる汎用性の高いアニメーションです。

「Gsap.js」で実装できるアニメーション

Gsap.jsのアニメーションは透明から表示されるものだけではありません。コンテンツの形状を変化するものであったり位置を移動するものなど、さまざまなアニメーションを実装できます。

カスタマイズ性能は抜群なのでスクロールで発動するアニメーションはGsap.jsがあれば大体事足ります。

「Gsap.js」デモ

See the Pen Untitled by 近野智優 (@bplqliga-the-bashful) on CodePen.

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

「Gsap.js」実装

ではここから実際にどうやって「Gsap.js」を導入していくかを解説していきます。基本的な実装からカスタマイズ方法まで解説しているのでぜひ参考にしてください。

「Gsap.js」基本実装方法

STEP1_CDN読み込み

まず、Gsap.jsのCDNを読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script>

注意

バージョンがアップデートされている場合があるのでしっかり最新版を読み込むよう注意してください
wordpress化している場合だと上記のコードとは異なります。（function.php記述のため）

STEP2_html記述

アニメーション対象となるコンテンツのコードを記述します（既に存在する場合は必要ありません）

<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">
	<meta name="robots" content="noindex,nofollow">
	<title>サイトタイトル | デモページ</title>
	<link rel="stylesheet" href="style.css">
</head>

<body>
	<div class="space">
		<p>↓下にスクロール↓</p>
	</div>
	<ul class="js-gsap_list">
    //「js-gsap_item」がアニメーション対象//
		<li class="js-gsap_item"></li>
		<li class="js-gsap_item"></li>
		<li class="js-gsap_item"></li>
		<li class="js-gsap_item"></li>
		<li class="js-gsap_item"></li>
		<li class="js-gsap_item"></li>
		<li class="js-gsap_item"></li>
		<li class="js-gsap_item"></li>
		<li class="js-gsap_item"></li>
	</ul>
  //STEP1の記述//
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script>
	<script src="main.js"></script>
</body>

</html>

今回は要素一つ一つにアニメーションのタイミングを与えたいので子要素（li）にアニメーショントリガーのクラスを付与しています。もし親要素であるulに付与していた場合、liは全て同時に表示されます。

注意

gsap.jsのコードを記述するjsファイルを作り、それを読み込むことも忘れずに

STEP3_css記述

cssを記述します。（必須なのは「js-gsap_item」にかかっている「opacity:1」です）

.space {
	margin: 200px auto;
	text-align: center;
}

p {
	font-size: 20px;
}

.js-gsap_list {
	margin-top: 30px;
	margin-bottom: 250px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
  list-style: none;
}

.js-gsap_item {
	width: 28%;
	height: 100px;
	object-fit: cover;
	background-color: rgb(101, 205, 96);
	opacity: 1;
}

STEP4_js記述

gsap.jsのコードを記述します。

function fadeup() {
	var items = gsap.utils.toArray(".js-gsap_item");
	items.forEach(function (item) {
		gsap.from(item, {
			autoAlpha: 0,
			y: 30,
			duration: 2,
			scrollTrigger: {
				trigger: item,
				start: "top center+=100"
			}
		});
	});
}

fadeup();

詳細