jQueryプラグインのjquery.inview.jsを利用します。特定の要素に対し、ブラウザの表示領域内と表示領域外に分けて処理が実行できます。ブラウザの表示領域内では画像を順番にフェードイン、表示領域外では画像を非表示にする、イメージフェーダーのサンプルです。
htmlのコードは下記になります。
画像を格納するdivタグにclass=”fade_trigger1″を、フェードインさせる画像のimgタグにclass=”element”を付与します。
<p class="fade_title">フェーダーデモ</p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<div class="fade_image fade_trigger1">
<img class="element" src="fade01.jpg" alt="">
<img class="element" src="fade02.jpg" alt="">
<img class="element" src="fade03.jpg" alt="">
<img class="element" src="fade04.jpg" alt="">
</div>
続いてCSSのコードです。
フェードインさせる画像はFlexboxで横並びにしています。また、opacityに0を指定して透明にしておきます。
.fade_image {
display: flex;
margin: 0 0 3em;
}
.fade_image img {
width: 24%;
height: auto;
margin: 0 8px 0 0;
}
.fade_image img:last-child {
margin: 0;
}
.element {
opacity: 0;
}
@media screen and (max-width: 640px) {
.fade_image {
flex-wrap: wrap;
flex-direction: column;
}
.fade_image img {
width: 100%;
margin: 0 0 10px 0;
}
.fade_image img:last-child {
margin: 0;
}
}
最後にjQueryのコードです。
コールバック関数の引数「isInView」は要素がブラウザの表示領域内の場合は「true」、表示領域外の場合は「false」を返します。delayで0.2秒遅延実行することで、順番にフェードインする動作を実装しています。フェードインはjQueryのanimateを使用し、画像のopacityを操作しています。CSSのtransitionは使用していません。画像がブラウザの表示領域外の場合は、opacityを0にする処理が実行されます。
$(function() {
var delaySpeed = 200;
$('.fade_trigger1 .element').on('inview', function(event, isInView) {
if(isInView){
$(".fade_trigger1 .element").each(function(i){
$(this).delay(i*(delaySpeed)).queue(function(){
$(this).stop(true, true).animate( { opacity: 1 }, 500);
});
});
}
else{
$(this).stop(true, true).animate( { opacity: 0 });
}
});
});