一定のスクロールをすると表示されるようにするjs
Highneeds
$(function() {
$(‘.inview’).on( ‘inview’, function( event, isInView ) {
if( isInView ) {
$(this).stop().addClass(‘mv01’);
}
else {
$(this).css({
‘opacity’: 1,
});
}
});
});
css
.inview{
opacity: 0;
}
.mv01{
opacity: 1;
animation-duration: 2s;/アニメーション時間/
animation-name: RightToLeft;/アニメーション名/
animation-iteration-count: 1;/アニメーションの繰り返し(無限)/
}
@keyframes RightToLeft {
0% {
opacity: 0;/透明/
transform: translateY(50px);/X軸方向に50px/
}
100% {
opacity: 1;/不透明/
transform: translateY(0);
}
}
html
inviewのクラスを追加
