超軽量で使いやすいビューポート アニメーションのVanilla JavaScript
リモートで新宿のオフィスが恋しい新人ウェブデザイナーのNNです。
Scroll Animationは超軽量のビューポートアニメーションJavaScriptです。独自のCSSアニメーションをビューポートで発火させたいだけの方にはお薦めです。
ビューポートでアニメーションするだけのVanilla JavaScriptです。
ミニマムな仕様でわずか800KBの超軽量。
gsap3を使用するまでもない、ビューポートで独自のアニメーションをさせたい人にはお薦めです。
Scroll-Animationの使い方
同梱されているJSファイルとCSSファイルを読み込みます。
HTML
<link rel="stylesheet" href="./scroll-animation.css" /><script src="./scroll-animation.js"></script>あとはアニメーションさせたい要素にカスタムデータ属性を追加するだけです。
HTML
<div class="box" data-san="slideRight"></div><div class="box" data-san="fade"></div>ビューポートに入るとカスタムデータ属性がクラスに追加されて、アニメーションするという単純な仕様です。
独自のアニメーションCSSを用意しておき、カスタムデータ属性に記載するだけで、いろいろなアニメーションをビューポートで発火させることができるわけです。
利便性と注意点
カスタムデータ属性ならなんでもクラスに追加してしまうのでその点は注意が必要です。
例えばdata-test="anime"としても、クラスにanimeを追加します。
これを利用して復数のアニメーション要素を追加して複雑なアニメーションを演出することもできます。
HTML
<div class="box" data-san="slideRight" data-test="fadeIn" data-test-after="fadeOut"></div>デモには、アニメーションの開始をコントロールするanimation delayのカスタムデータ属性が用意されています。
HTML
<div class="box" data-san="slideRight" data-san-delay="400"></div>便宜上data-san-delayとしていますが、これもanimation delayを読み込ませるだけならカスタムデータ属性は何でも良いわけです。
Scroll AnimationのCSSは次のようになっています。
CSS
/* SlideTop Animation */[data-san=slideTop] { opacity: 0; transform: translateY(100px); transition-duration: 1s;}.slideTop { opacity: 1; transform: translateY(0)}この記述方法でオリジナルのCSSアニメーションを用意して、あとはタグにカスタムデータ属性を記述するだけで、ビューポートに入ると要素をアニメーションしてくれます。
「ビューポートに入ったら、クラスに追加してアニメーションするだけでいいんだよ」という方にはとても便利なJavaScriptです。
