はじめに
今回は、animate.cssとJavaScriptを組み合わせて、スクロールすることによるテキストアニメーションを考えていきます。
animate.cssとは？
animate.cssは、class名を付けるだけで簡単にアニメーションを実装出来るライブラリを指します。
animate.cssの使い方
animate.cssを読み込む方法は２つあります。今回は、CDNで読み込む方法で進めていきます。
Git Hubからファイルをダウンロードして読み込む
https://github.com/animate-css/animate.css
animate.cssの記述の仕方
See the Pen サンプル by Uka Suzuki (@uukasuzuki_) on CodePen.
①付けたいアニメーションを探す
②実装する
<div class="animate__animated animate__heartBeat animate__infinite"></div>
- アニメーションを付けたい要素に、animate__animated(animate.cssの機能を使うために必ず記載する項目) と animate__heartBeat(選んだアニメーションのクラス名)を付けます。今回は、末尾にanimate__infiniteを付けていますが、これはずっと繰り返すという意味です。
スクロールするとテキストが現れる
See the Pen スクロールするとテキストが現れる by Uka Suzuki (@uukasuzuki_) on CodePen.
JavaScriptのコード解説
document.addEventListener("DOMContentLoaded", function () {
const elements = document.querySelectorAll(".animate-text");
const observer = new IntersectionObserver(
(entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("visible");
observer.unobserve(entry.target); // 1回表示されたら監視を解除
}
});
},
{
root: null, // ビューポートを基準にする
rootMargin: "0px 0px -10% 0px", // 表示領域の少し前で発火
threshold: 0, // 要素が1pxでも見えたら発火
}
);
elements.forEach((element) => {
observer.observe(element);
});
});
- rootMarginでは、"0px 0px -10% 0px"に設定することで、要素がビューポートに対して下から少し手前でアニメーションが発火するようにします。-10%を変更すると、発火するタイミングを早めたり遅くしたり調整可能です。
- observer.unobserve(entry.target)は、要素が一度表示されたら、再び監視しないようにしています。これにより、すでに表示された要素が再びアニメーションしないようにします。
まとめ
今回は、animate.cssとJavaScriptを組み合わせたテキストアニメーションの仕組みについてまとめました。
これらは、今後ポートフォリオサイト制作でも使用する可能性があるため、より実践的に考えながら制作していきたいと思います。