トップページやランディングページなどは目を引かせるために、スクロールしていく度にアニメーションするものが多くなっています。 特にCSS3が各ブラウザで標準化されてからはCSSだけでアニメーションが実装できるようになり、ライブラリとして様々なものが公開されています。
私が簡易なアニメーションを導入するのに「Animate.css」を利用しています。 すでに多くのサイトで紹介されていますが、class名に指定のアニメーション名を追加するだけで動きをつけてくれるので、導入が非常に簡単なのが魅力です。
公式サイトでそのアニメーションがデモが確認できるので、リンクを置いておきます。
Animate.css（公式）
Animate.cssの実装
実装するにはまずhead内でAnimatecssを読み込み（ここではCDNを利用）、そして動きをつけたい要素のclass名にanimate__{アニメーション名}とクラス名animate__animatedを追加します。
<!-- Animate.cssを読み込む -->
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head><!-- アニメーション名とクラス名animatedをclassに追加 -->
<div class="animate__animated animate__bounce">bounce</div>これだけで簡単に動きが付けられますが、このままだとページ読み込みと同時にアニメーションしてしまいます。アニメーションはウィンドウ内に要素が出てきたときに見せたいので発火のタイミングをJavaScriptで調整します。
先に実装サンプルを上げておきます。
発火スクリプトの実装サンプル
いかがでしょうか。
Animate.cssの中でフェードインするアニメーションを一通り実装してみました。
スクリプトの使い方について
※JQueryの記述をIntersectionObserverに変更しました。
Javascriptに下記コードをコピペします。
(() => {
// animatedクラスを持つエレメントを取得
const targetElements = document.querySelectorAll(".animate__animated");
// animatedクラスがなければ終わり
if (!targetElements.length) return;
// 発火した時の処理data-animated属性をtrueに
const handleObserve = (entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.setAttribute("data-animated", "true");
}
});
};
// IntersectionObserverのオプション設定
const observerOptions = {
root: null,
rootMargin: '0px',
threshold: 0
};
// IntersectionObserverのインスタンス化
const observer = new IntersectionObserver(handleObserve, observerOptions);
// animatedクラスを持つエレメントの処理
targetElements.forEach((target) => {
// data-animated属性をセット
target.setAttribute("data-animated", "false");
// IntersectionObserverをエレメントにセット
observer.observe(target);
});
})();これは.animete__animatedクラスを持つ要素に「data-animated」属性をfalseの値で追加し、画面内に入った時にtrueにする仕組みです。
スタイルシートで「data-animated」属性がfalseの要素を非表示にするためvisiblity：hiddenを、またアニメーションをストップするためにanimation-nameをinitial状態に指定します。
/* アニメ―ションする要素を非表示にする */
[data-animated=false] {
visibility: hidden;
animation-name: initial !important;
}あとはHTMLの方で動きをつけたい要素のanimation属性にanimate.cssで指定されているアニメーション名を入力するだけ。下記例ではfadeInUpを指定しています。
<div class="animate__animated animate__fadeInUp">fadeInUp</div>アニメーションはAnimate.cssのリファレンス通りに指定すればよく、ランディングページなんかでも簡単に使えるかと思います。
補足として・・・
要素が画面ないに入った段階でアニメーションが発火します。以下のIntersectionObserverのオプション設定のrootMarginを変更することでアニメーションのタイミングをずらせます。
// IntersectionObserverのオプション設定
const observerOptions = {
root: null,
rootMargin: '0px',
threshold: 0
};IntersectionObserverについては別の記事で記載しましたので参照してください。
最後に
まだホームページに関する記事が少ない中 、コードを触れる人に向けた内容になっているので唐突な印象になってしまったかも知れませんが、備忘録も兼ねて定期的に書き込んでいけたらなと思っています。今後もよろしくお願いします。
コメント