多くのサイトで使われている、要素を時間差で出現させるアニメーション。
実装方法もいろいろあり、便利なライブラリなども多いかと思いますが、
今回はjQueryを使用した実装をご紹介。
完成イメージ。
・HTML
<li>要素が表示させたい要素郡です。任意の共通クラス名をつけてください。
<button href="" id="click">click!</button>
<button href="" id="hide">hide!</button>
<ul>
<li class="js-fadeIn orange">１</li>
<li class="js-fadeIn green">２</li>
<li class="js-fadeIn red">３</li>
<li class="js-fadeIn yellow">４</li>
<li class="js-fadeIn gray">５</li>
<li class="js-fadeIn pink">６</li>
</ul>
・CSS
関係のないスタイルは割愛してます。?
初期表示でopacity:0;や display: none; などをかけてください。
任意のクラス名（今回はshow）が付与された時に要素が表示されるようにします。
（ちなみに、上の完成イメージで使用しているスタイルは
transform: rotateX(90deg) → transform: rotateX(0) です。 ）
li{
opacity: 0;
}
li.show{
transition-duration: 0.5s;
opacity: 1;
}
・javascript
// 要素を表示させるfunction
function fadeIn(){
$('.js-fadeIn').each(function(i){
let delay = 100; // 0.1秒ずつずれます。好きな秒数に調整してください。
$(this).delay(i * delay).queue(function(next){
$(this).addClass('show');
next();
});
})
};
// 要素を表示させるクリックイベント
$('#click').on('click', function(){
fadeIn();
});
// 要素を非表示にするクリックイベント
$('#hide').on('click', function(){
$('.js-fadeIn').removeClass('show');
});
ちょっと説明。
- 対象の要素に「show」クラスを時間差で付与しています。
- addClass()でなくfadeIn()でも実装可能です。
- fadeIn()にする場合は初期スタイルをdisplay: none;に設定してください。
- スタイル関係の調整は出来るだけCSSに記述したいので
addClass()を使用していますが、こちらはお好みです。
// jQueryデフォルトのfadeIn()メソッドで実装。
function fadeIn(){
$('.js-fadeIn').each(function(i){
let delay = 100; // 0.1秒ずつずれます。好きな秒数に調整してください。
$(this).delay(i * delay).fadeIn();
})
};
- addClass()を時間差で付与したい場合にqueue()がよく使われているようです。
jQueryのEffect系メソッドです。使い方はこんな感じ。
$target.queue(function(next){ // queue(ここにコールバック関数入れます。)
$target.addClass('hoge'); // 実行したい処理を書きます。
next(); // next()で次の処理へ。dequeueと同じ役割
});
おまけ。
少し処理を追加することで、よく見かける
「スクロールして画面に入ったらふわっと表示」が実装できます。
function scrollFadeIn(){
$('.js-fadeIn').each(function(i){
const WINDOW_HEIGHT = $(window).scrollTop();
const TARGET_HEIGHT = $(this).offset().top - 300;
if( WINDOW_HEIGHT > TARGET_HEIGHT){
// 画面に入ったらinを付与しておく。
$(this).addClass('in');
// inが付いているターゲット要素にshowを付与していく。
$('.js-fadeIn.in').each(function(i){
let delay = 100;
$(this).delay(i * delay).queue(function(next){
$(this).addClass('show');
next();
})
})
}
})
}
