可視範囲に入ってたらfadeIn ※要jQuery
//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');
}
});
});
});
<div class="fadeinTp02">
この要素fadeIn
</div>
.fadeinTp01{
opacity : 0.1;
transform : translate(0, 50px);
transition : all 500ms;
}
.fadeinTp01.scrollin {
opacity : 1;
transform : translate(0, 0);
}