クライアントから、あるサイトのFVと同様のアニメーションを実装してほしいとのリクエストがあり、GSAPがいいかなと思いもしたのですが、Aos.jsの方がこれならライトかもと試したら、そこそこいいかんじになったのでメモします。
実現したいアニメーション
ビジュアルがズームアウトしたらヘッダがスライドダウン
↓
タイミングでタイトルが1文字づつフェードイン
↓
左側のフレームがスライドイン
↓
ハンバーガーメニューがフェードイン
↓
リードがフェードアップ
というアニメーションを実装します。
Aos.jsを導入する
以下を記述します。
javascript
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
css
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
詳しくは「【JS】スクロールアニメーションが超簡単に設定できるaos.jsの使い方」を参考にしてください。
公式サイトはこちら
オプション「delay」を使う
各種パーツにタイムラグアニメーションを設定する場合は、「delay」オプションを使用します。
ここに秒数を設定することで、発火までのタイミングを設定できます。
data-aos-delay 発火までの秒数 (ms) デフォルトは0
例）
<div class="main" data-aos="zoom-out" data-aos-delay="500"></div>
.mainは0.5秒後にzoom-outアニメーションが始まるとなります。
これが分かればあとは簡単ですね！
実装したhtml
では実装してみましょう！
html
<div id="main-wrap"> <div id="nav-wrapper" class="nav-wrapper"> <div class="hamburger" id="js-hamburger" data-aos="fade" data-aos-delay="2700" data-aos-duration="1500"> <span class="hamburger__line hamburger__line--1"></span> <span class="hamburger__line hamburger__line--2"></span> <span class="hamburger__line hamburger__line--3"></span> </div> <nav class="sp-nav"> <ul> <li>メニュー1</li> <li>メニュー1</li> <li>メニュー1</li> </ul> </nav> <div class="black-bg" id="js-black-bg"></div> </div> <div class="main" data-aos="zoom-out" data-aos-delay="500" data-aos-duration="1800" data-aos-easing="ease-out-sine"></div> <header class="header" data-aos="slide-down" data-aos-delay="1500" data-aos-duration="1500"> <div class="header-inner"><h1><img src="img/logo.svg"></h1></div> </header> <div class="main-frame" data-aos="slide-right" data-aos-delay="1800" data-aos-duration="1500"></div> <div class="main-title"> <div class="title"> <h2> <span data-aos="fade" data-aos-delay="1000" data-aos-duration="1500">A</span><span data-aos="fade" data-aos-delay="1300" data-aos-duration="1500">o</span><span data-aos="fade" data-aos-delay="1600" data-aos-duration="1500">s</span><span data-aos="fade" data-aos-delay="1900" data-aos-duration="1500">.</span><span data-aos="fade" data-aos-delay="2100" data-aos-duration="1500">j</span><span data-aos="fade" data-aos-delay="2400" data-aos-duration="1500">s</span> </h2> <p data-aos="fade-up" data-aos-delay="3000" data-aos-duration="1500" data-aos-easing="ease-out-sine">エフェクトを使って<br>FVをタイムラグアニメーションにする</p></div> </div> </div>
data-aos-delay以外にdata-aos-duration（アニメーション時間 (ms)）を入れると、より効果的です。
ただ、注意しなければいけないのはdata-aos-delayに設定できるのは3000までです。
それを超えると無効なるので3001以上設定したい場合の方法の1つとしてオーバーライドして設定値を変更することも可能です。
document.addEventListener('DOMContentLoaded', function() {
var elements = document.querySelectorAll('[data-aos-delay]');
elements.forEach(function(el) {
var delay = el.getAttribute('data-aos-delay');
if (delay > 3000) {
el.style.transitionDelay = delay + 'ms';
}
});
AOS.init(); // AOSを通常通り初期化
});
GSAPとAosどっちがいい？
比較するのもどうかと思いますが、個人的な感想としてまとめてみます。
GSAPはスクリプトにタイムラインがあり、結構複雑な動きを実現できます。ただし、慣れないうちはそれなりに手間を要する印象があります。
「【js】GSAPを使ってオープニングアニメーションを作成する」で解説しています。
対してAosは直接タグに書き込みができ、オプションも豊富なので手軽に実装ができます。ただストーリーが明確で見せたいオープニングアニメーションとなるとGSAPに一日の長があると思います。
これからも研究してみます！
