スクロールすると表示されるアニメーションとかをやりたかったので、 いろいろ調べたら、ScrollRevealがいい感じだった。その時の備忘録
npmでインストール
$ npm install scrollreveal --save
スクロールアニメーションの設定
import ScrollReveal from "scrollreveal" ScrollReveal().reveal('.animate', { origin: 'bottom', // アニメーションの起点: ‘top’, ‘bottom’, ‘left’, ‘right’ distance: '20px', // アニメーションの距離 duration: 500 , // アニメーションの長さ（ミリ秒) delay: 0, // アニメーションの遅延 rotate: { x: 0, y: 0, z: 0 }, // 要素の回転 opacity: 0, // アニメーション開始時の透明度 scale: 0.9, // アニメーション開始時のスケール mobile: false, // モバイルでもアニメーションを有効にするかのフラグ reset: false, // 表示されるたびにアニメーションするかのフラグ useDelay: 'always', // 遅延実行の条件: ‘always’, ‘once’, ‘onload’ viewFactor: 0.2, // アニメーション開始する表示割合(%) });
ほかにも、easingやeasing、viewOffsetなんてのもある」。
あとは、アニメーションしたい要素のクラスにanimateを追加するだけ。
<div class="animate"> ... </div>
以上！！
