画像が左から順番にフェードインして表示されるスクリプト

スクロール表示

https://aorino.jp/

画像が左から順番に、フェードインしてくるスクリプトを作りたい。

【やりたい事】

画像が順番に出てくる

フェードインされる

下から上にフワットでる

スクロールの高さを取得する

要素が画面内に入ったら、ふわっと表示される

リセットされる

■要素の時間差フェードイン

フェードイン>>

さらに説明>>

■デモ

https://web-emo.com/jquery-scroll-fadein-each/

https://tech.brick-plan.jp/fade/fade-pattern01/

■解説

https://qumeru.com/preview/JavaScript/339/sample/index.html

・スクロールの原理を解説

https://chaika.hatenablog.com/entry/2016/08/19/211516

バウンドサンプル

https://blow-in.net/blog/entry-1901.html

デモ1

フェーダーデモ

左から右に、でてくる。JSでかくと、なんだか遅いかな・・・

【js部分】

$(this).stop(true, true).animate( { opacity: 1 }, {
duration: 700,
step: function (now) {
var dist = 70 - (70 * now);
$(this).css({ transform: 'translateY(' + dist + 'px)' });
}
});

});
}
});
});
</script>

【css】

.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;
}
}

JSだけで処理すると、カク付くような気がします。

cssのトランジッションなどを利用して、作った方が、綺麗に動くようです。

デモ2

これで完成です。色々やりましたが、これでいけそうです。こちらはJqueryで書いてある。「.delay」遅延を使います。画像の位置をアニメーションでずらします。

サンプル>>

【html】

【script】

	  $(function(){
    $(window).scroll(function (){
        $('.fadein').each(function(){
            var position = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > position - windowHeight + 200){
                $(function(){
                    $('.fadein').each(function(i){
                        $(this).delay(i * 200).queue(function(){
                            $(this).addClass('active');
                        });
                    });
                });
            }
        });
    });
});

fadeinを0.2秒ごとにつけています。

【css】

.fade_in_test{
width: 100%;
display: flex;
}
.fade_in_sub{
width: 30%;
margin: 0 10px;
}

.fadein {
opacity : 0;
transition : all 1s;
}

.fadein.active{
opacity : 1;
}

参照>>