可視範囲に入ってたらfadeIn ※要jQuery

fadeIn.css

.fadeinTp01{
    opacity : 0.1;
    transform : translate(0, 50px);
    transition : all 500ms;
    }

.fadeinTp01.scrollin {
    opacity : 1;
    transform : translate(0, 0);
  }
  
  

fadeIn.html

<div class="fadeinTp02">
この要素fadeIn
</div>

fadein.js

//itemtext fadein
  $(function(){
    $(window).scroll(function (){
        $('.fadeinTp01').each(function(){
            var elemPos = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > elemPos - windowHeight + 200){
                $(this).addClass('scrollin');
            }
        });
    });
});

//複数
  $(function(){
    $(window).scroll(function (){
        $('.fadeinTp01 ,.fadeinTp02').each(function(){
            var elemPos = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > elemPos - windowHeight + 200){
                $(this).addClass('scrollin');
            }
        });
    });
});