◯HTML
<div class="fadein"></div> <div class="fadein"></div> <div class="fadein"></div>
◯JS
var scroll = $(window).scrollTop(); var window_height = $(window).innerHeight(); var window_bottom = scroll + window_height; $('.fadein').each(function(){ var fadein_pos = $(this).offset().top - 1; if ( fadein_pos < window_bottom ) { $(this).addClass('fadein_anime'); } });
◯CSS
.fadein { opacity: 0; } .fadein_anime { -webkit-animation-fill-mode: both; -ms-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 2s; -ms-animation-duration: 2s; animation-duration: 2s; -webkit-animation-delay: .5s; -ms-animation-delay: .5s; animation-delay: .5s; -webkit-animation-name: fadein_anime; animation-name: fadein_anime; visibility: visible !important; } @-webkit-keyframes fadein_anime { 0% { opacity: 0; -webkit-transform: translate(0,20px); } 100% { opacity: 1; -webkit-transform: translate(0,0); } } @keyframes fadein_anime { 0% { opacity: 0; -ms-transform: translate(0,20px); transform: translate(0,20px); } 100% { opacity: 1; -ms-transform: translate(0,0); transform: translate(0,0); } }