自分用にメモ残し__φ(・x・

WEBサイトで画像など指定箇所にフェードイン表示などのアニメーションの設定を設置しやすい様に自分なりにプログラム整理したお話。

アニメーション自体は「CSSのみ」でも行えるが、フェードインなどのアクセス時に再生されるアニメーションは再生のタイミングを制御しないといけないため、「画面をスクロールし表示された時点でアニメーションを実行する」JavaScriptで制御する方法を使用する。

（新しいCSSの追加により、このあたりの制御も出来るようになったようだが、試してみてもうまく行かなかったので、当面この方法で制御しようと思う。）

早速グーグル先生経由で、プログラマーでなくても理解りやすくて設置しやすいJavaScriptのコードを公開されている方を発見。ただそのままコピペで使用しても動かなかったので、こちら修正したモノを公開。

ソースコードがこちら(・∀・)つ◎

//クラス名が「scroll-in」の要素を取得
const objects = document.querySelectorAll('.scroll-in');

//スクロール感知で実行
const cb = function(entries, observer) {
entries.forEach(entry => {
if(entry.isIntersecting) {
entry.target.classList.add('displayed');//スクロール感知で「displayed」のクラス名を付与
observer.unobserve(entry.target); //監視の終了
}
});
}

// オプション
const options = {
root: null,
rootMargin: "0px",
threshold: 0
}

// IntersectionObserverインスタンス化
const io = new IntersectionObserver(cb, options);

// 監視を開始
objects.forEach(object => {
io.observe(object);
});

こちらのJavaScriptを「animation-scrolling.js」という名称で外部ファイル化。

で、HTML上の指定例はこんな感じ。

<div class="wrapper">
  <div class="item scroll-in"></div>
  <div class="item scroll-in"></div>
</div>

アニメーションを行いたい箇所のクラスに「scroll-in」を追加。
画面スクロールなどで画面上に表示された時点で、上記JavaScriptにより、クラスに「displayed」の単語が追加されるというモノ。

仕上げに「displayed」に好きなCSSアニメーションを追加指定すれば完成！

すごく理解りやすいし、制御しやすい(・∀・)

CSSアニメーションを自分で組めない方は、いろいろな有志のサイトで紹介されていますので、分かりやすいところを参考にすれば良いと思う。

そのウチに制御の単語を覚えるで自分で作れる様になれるはず！笑

ついでに、下から上へフェードインするアニメーション例を紹介(・x・)ノ

.item.scroll-in{
    opacity: 0;
}
.item.displayed{
  animation: fadeUp 1s forwards;
  animation-delay: 1s;
}
@keyframes fadeUp{
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

アニメーション設定って結構うるさくなって見難くなるのですけど、この指定はうるさくないので結構使いやすいコードかなっと思って、結構バシバシ使ってます(・∀・)

CSSの書き方によっては「複数指定」も「個別指定」も簡単にできるので、かなり使いやすいはず。
いままでアニメーションにチャレンジしてなかった方は試してみてくださいまし！