HighLab

一定のスクロールをすると表示されるようにするjs

  • 公開日:
  • 更新日:
  • 文字数:514文字

$(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のクラスを追加