最近webサイトで、下にスクロールすると「ふわっと」出現する効果が増えて来た。
このアニメーションを簡単にプラグインで実装するには、以前
Blocks Animation: CSS Animations for Gutenberg Blocksの使い方
という記事で解説しました。
が、慣れてくればくるほど、上記プラグインが「なんかダサい」と思えてくる。 つまり、実装するのは簡単なんだけど、アニメーション効果が機械的でぎこちないのだ。
もう少し綺麗に見せたい（or自分でカスタマイズしたい）場合の 「プログラムコード」で実装する方法について解説
もくじ（手順）
１）CSS（ふわっと効果の記述）
２）JavaScript（スイッチ）※プラグイン使用
３）要素に「fadeup」付与（何を動かすか、要素の指定）
完成見本１：インドアゴルフ場のホームページ
完成見本２：訪問看護ホームページ
１）CSS（ふわっと効果の記述）
■外観⇒カスタマイズ⇒追加CSS
ここに、アニメーションをどのように動かしたいか（今回は下から上にふわっと出てくる）を記述する
↓↓例えばこちらをコピペ
/* ふわっとアニメーション */
.fadeup {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.fadeup.is-visible {
opacity: 1;
transform: translateY(0);
}
２）JavaScript（スクロールして見えたら表示するスイッチ）
さて「１」でアニメーションができました。次にこれを「スクロールして現れた時に稼働する」という、いわば「スイッチ」を用意しなければいけません。このような動作スイッチはJacascriptで書くのですが、どこに書くかというと、記述専用のプラグインを使用するのが無難でしょう。
プラグイン検索「WPCode」
▼コードスニペット⇒ヘッダーとフッター
▼「フッター」のところに下記記述
<script>
document.addEventListener('DOMContentLoaded', function () {
const targets = document.querySelectorAll('.fadeup');
if (!('IntersectionObserver' in window)) {
targets.forEach(el => el.classList.add('is-visible'));
return;
}
const observer = new IntersectionObserver(function(entries, obs) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
obs.unobserve(entry.target);
}
});
}, {
rootMargin: '0px 0px -10% 0px',
threshold: 0.15
});
targets.forEach(function(el) {
observer.observe(el);
});
});
</script>
３）要素に「fadeup」付与（何を動かすか、要素の指定）
さて、今までのところで
１）どのように動かすか
２）スイッチの設定
までができました。あとは「何を動かすか」という要素をしていします。動かしたい画像ブロックに「fadeup」というのを付与すればOKです。
▼画像指定⇒右サイド「高度な設定」
▼追加CSSクラスに「fadeup」を記述（既に何か書いてある場合には、「半角＋fadeup」）
以上です。これで「ふわっと」アニメーションが実装できているのを確認してみてください
