最近Tailwindを触れていて、ふわっと表示させるスライドインアニメーションを実装しようと思って調べた内容をメモしておきます。
目次
実現したいこと
- スクロールした際に要素をふわっと表示させる（スライドイン）
よく見かける仕様ではありますが、Tailwind CSSで実装する際の記事はあまりなかったのでどなかたの役立ったら幸いです。
事前準備
- Tailwindの設定が完了していること
（この記事に到達しているということは、すでにNext.jsにTailwindを導入できているかと思います。）
デモ
先に参考にさせていただいたCodePenのデモリンクを貼っておきます。
URL：https://codepen.io/jamesdoc/pen/qBbeOym
方法
1.tailwind.config.jsをカスタマイズ
設定ファイルにアニメーションの設定を追加します。translateYのサイズ等、細かな点は自由にカスタマイズしてみてください。
module.exports = {
...
theme: {
extend: {
animation: {
slideIn: "slideIn 1s ease-in forwards",
},
keyframes: {
slideIn: {
"0%": {
opacity: 0,
transform: "translateY(60px)",
},
"100%": {
opacity: 1,
transform: "translateY(0)",
},
},
},
},
},
};2.関数コンポーネントを作成する
使い回しができるよう専用の関数コンポーネントを作成します。
export const scrollFadeIn = () => {
const callback = function (entries) {
entries.forEach((entry) => {
//console.log(entry);
if (entry.isIntersecting) {
entry.target.classList.add("animate-slideIn");
} else {
entry.target.classList.remove("animate-slideIn");
}
});
};
const observer = new IntersectionObserver(callback);
const targets = document.querySelectorAll(".js-show-on-scroll");
targets.forEach(function (target) {
target.classList.add("opacity-0");
observer.observe(target);
});
};3.コンポーネント内で読み込む
先ほど作った関数を取得して実行しています。最初はエラーが出てしまいましたが、useEffectを入れることで改善されました。実装方法は、他にもあると思いますが動いたので一旦OKとします。
import { scrollFadeIn } from "../scrollFadeIn";
export const Page = () => {
useEffect(() => {
scrollFadeIn();
}, []);
return (
<div className="js-show-on-scroll>
...
</div>
);
};まとめ
以上になります。Tailwind CSSの設定ファイルを少しカスタマイズしましたが、全体としては結構簡単に実装できました。よく使う機能になるかと思うので、全体像を覚えておこうと思います。
参考：Animate on scroll with Tailwind CSS
参考：Tailwind Animate on Scroll
この記事にコメントする
このサイトはreCAPTCHAとGoogleによって保護されています。プライバシーポリシーと利用規約が適用されます。