スクロールでふわっとでてくるやつメモ

jQueryでやるよー
スクロールに応じてクラスをつけるよー

js

$(function(){
    //スクロール時に実行
    $(window).scroll(function (){
        //body内の要素を探す
        $('.fadein').each(function(){
            //位置を取得
            var pos = $(this).offset().top;
            //スクロール値を取得
            var scroll = $(window).scrollTop();
            //ウインドウの高さを取得
            var windowHeight = $(window).height();
            //条件を満たしたら要素にクラスをつける。
            if (scroll > pos - windowHeight + 200){
                $(this).addClass('on');
            }
        });
    });
});

css

.fadein{
    opacity: 0;
}
.on{
    opacity: 0;
    animation: fadein 2s ease 0s 1 forwards;
}
@keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
  }

スクロールしたらクラスを追加するプログラムです。
発動タイミングは、数値をいじったり、アニメーションに関してはCSSの数字をいじって調節してください。