ふわっと表示

初期の画面表示のときやスクロールに合わせてふわっと浮き出るような画面表示の方法についてこれまで使用したものを備忘のため残します。初心者で同じように悩んだ方は試しに使ってみたください。

初期画面表示
スクロール時
“transition”と”animation”について

初期画面表示

以下のコードは画像を2秒かけて透明から徐々に表示するものになります。

        <div class="fade_in">
            <img src="***.jpg" alt="***">
        </div>

.fade_in {
    animation-name: fadeInAnime;
    animation-duration: 2.0s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeInAnime {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

スクロール時

以下のコードでは、スクロールするたびにscroll_inクラスの付与された要素がviewport内の特定の位置以内に入ったときに.onクラスを付与して別のスタイルを適用しています。

また、余談ですがこのスクロールに合わせてクラスを付与する仕組みはいろいろなところで応用が利きそうなので覚えておきたいと思います。

<div class="scroll_in">
   <img src="***.jpg" alt="***">
</div>

.scroll_in {
    transition: 0.8s ease-in-out;
    opacity: 0;
    transform: translateY(20px);
}

.scroll_in.on {
    transform: translateY(0);
    opacity: 1;
}

$(window).scroll(function () {
    var scrollAnimationElm = document.querySelectorAll('.scroll_in');
    var scrollAnimationFunc = function () {
        for (var i = 0; i < scrollAnimationElm.length; i++) {
            var triggerMargin = 100;
            if (window.innerHeight > scrollAnimationElm[i].getBoundingClientRect().top + triggerMargin) {
                scrollAnimationElm[i].classList.add('on');
            }
        }
    }
    window.addEventListener('load', scrollAnimationFunc);
    window.addEventListener('scroll', scrollAnimationFunc);
});

“transition”と”animation”について

ちなみに、アニメーションをCSSで作成するときに”transition”と”animation”の2種類があります。
“transition”は、何かしらスタイルが変わるときの変化前と変化後のつなぎ方を設定するのみであり、詳細な設定が出来ないのに対して、”animation”は、変化前と変化後だけではなく途中のスタイルの指定やループなどの詳細な設定をすることが出来ます。個人的には、”transition”はhoverやclickなどのイベントが発生するときや新たにクラスを追加するときに使用するのがいいのかなと思ったりします。