ミギムキ

[CSS] ページのスクロールに合わせて要素をスライドインさせたい

公開日:2018/09/12 更新日:2020/10/02

やりたいこと

ページをスクロールしたときに、ふわっとフェードインして画像や文章を表示するエフェクトをよく見かけます
ユーザーが流し読みでクルクルとスクロールする手を止めて、目を惹きつける効果が見込めます
あまり多用すると表現がしつこくなってしまうので、ここは是非ともユーザーに見てもらいたい、読んでもらいたいという「ここぞ」なコンテンツに適用しましょう

サンプルコード

CSS

.slidein {
    transform: translateY(50px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.5s, opacity 0.5s, visibility 0.5s;
}
.slidein.js_active {
    transform: translateY(0px);
    opacity: 1;
    visibility: visible;
}

jQuery

jQuery(function($) {
    const targets = $('.slidein');
    if(!targets.length) return;

    $(window).scroll(function () {
        const slideBorder = $(this).scrollTop() + ($(this).outerHeight() * 0.7);
        targets.each(function() {
            if(slideBorder > $(this).offset().top) {
                $(this).addClass('js_active');
            }
        });
    });
});

仕組み、解説、補足など

「slidein」クラスを適用した要素の先頭が、表示画面の中央より下にスクロールされたとき、その要素に「js_active」というクラスを付与します
「js_active」クラスがついたときにアニメーション動作するようCSSを組んでいます

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。