アトリエロワ

スクロールして表示されたタイミングでアクションを起こすjs

手順1　scrollrevealをダウンロード

scrollrevealをダウンロード

https://github.com/jlmakes/scrollreveal

手順2　ScrollReveal.min.jsをhtmlに読み込む

<script src="../js/scrollreveal.min.js"></script>

手順3　ScrollRevealでアニメーションする要素の初期化

CSS

.box{
    visibility: hidden;
}

手順4 jsに記載

ScrollReveal().reveal('.box');

手順5　アニメーションする要素にcssを付ける

<div class="box">テキスト</div>

手順6 jsアレンジ

ScrollReveal().reveal('.box', { 
  duration: 800, // アニメーションにかかる時間
  viewFactor: 0.2, // 0~1,どれくらい見えたら実行するか
  reset: true   // アニメーション表示を繰り返すかしないか
});

HOME > javascript > スクロールして表示されたタイミングでアクションを起こすjs

javascript

javascript

+ More