画像が下から上へ移動しながら順番にフェードインで表示される、イメージフェーダーのサンプルです。
CSSのtransitionを使用せず、jQueryのanimateのみで実装しています。
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のコードです。
フェードインさせる画像が画面サイズの下から1/5までスクロールされた時点でフェードインを実行します。delayで0.3秒遅延実行することで、順番にフェードインする動作を実装しています。フェードインはjQueryのanimateを使用し、画像のopacityとtransformのY軸移動距離を操作しています。CSSのtransitionは使用していません。
var delaySpeed = 300;
$(window).on("load scroll", function (){
$(".fade_trigger1 .element").each(function(i){
var element = $(".fade_trigger1").offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > element - windowHeight + windowHeight / 5){
$(this).delay(i*(delaySpeed)).queue(function(){
$(this).stop(true, true).animate( { opacity: 1 }, {
duration: 700,
step: function (now) {
var dist = 70 - (70 * now);
$(this).css({ transform: 'translateY(' + dist + 'px)' });
}
});
});
}
});
});