2023
11/6
誰でも簡単にスクロールアニメーションをつける方法。「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();
詳細
- 「autoAlpha: 0」opacity0からスタート
- 「y:30 」transform:translateY(30px)からスタート
- 「duration:2」アニメーション開始から終了まで
- 「trigger: item」アニメーションのトリガーを各itemに
- 「start: “top center+=100″」トリガー(各item)が画面中央+100pxの時にアニメーション起動
「gsap.from」の部分は、gsapで記述している状態から本来の状態(cssの状態)に戻るという意味です。もしformの部分がtoになっていれば、逆に本来の状態からgsapで記述した状態に変化します。
「Gsap.js」カスタマイズ方法
基本的に使うのは既に先ほど説明したアニメーションですが、そのほかにもGsap.jsはさまざまなアニメーションをかけることができます。使用用途に応じてカスタマイズしてください。
1,Gsapを使って回転させたい
See the Pen gsap-2 by 近野智優 (@bplqliga-the-bashful) on CodePen.
cssで言うと「transform:rotate」ですね。これはなかなかトリッキーなアニメーションなので使う場面は限定されるかもしれません。
2,Gsapを使って移動させたい
See the Pen gsap-3 by 近野智優 (@bplqliga-the-bashful) on CodePen.
cssで言うと「transform:translate」ですね。今回はx軸ですがもちろんy軸にも水平移動させることができます。
3,Gsapを使って拡大(縮小)させたい
See the Pen gsap-3 by 近野智優 (@bplqliga-the-bashful) on CodePen.
cssで言うと「transform:scale」ですね。今回はわかりやすいようにアニメーションをループさせていますが、アニメーションを単発にして「ある一定のラインを超えたら要素を拡大」「そのラインより前に戻ったら要素を縮小」などの小回りの利くアニメーションを実装することも可能です。
4,Gsapを使って変色させたい
See the Pen gsap-3 by 近野智優 (@bplqliga-the-bashful) on CodePen.
cssで言うと「backgroundcolor」ですね。色が変わると印象も大きく変わるため、面白いアニメーションが実装できそうです。
その他の細かい設定やカスタマイズに関しては以下の記事を参考にしてみてください