SWELLでアニメーションを画像に付けてみた
|
<script src="https://unpkg.com/scrollreveal"></script> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
|
//【1番目】下から ScrollReveal().reveal('.sitakara0', { duration: 2600, origin: 'bottom', distance: '50px', reset: false }); //【2番目】下から ScrollReveal().reveal('.sitakara1', { duration: 2600, delay: 500, //待機時間 origin: 'bottom', distance: '50px', reset: false }); //【3番目】下から ScrollReveal().reveal('.sitakara2', { duration: 2600, delay: 900, //待機時間 origin: 'bottom', distance: '50px', reset: false }); //【4番目】下から ScrollReveal().reveal('.sitakara3', { duration: 2600, delay: 1200, //待機時間 origin: 'bottom', distance: '50px', reset: false }); |
4つの画像に、順番に下記をセットしていく。 私の雑記ブログのトップページには、アニメーションを多用しています。 気になる方は、ぜひ遊びに来てみてください。 まとめ ポイントをおさらいしておきます。 本記事のポイントまとめ SWELLでアニメーションを利用するためには、ScrollRevea ...