ANIMATION.CSS 쓰기

https://animate.style/

Terminal

git clone https://github.com/h662/cra-tailwind-template-2.git use-animate

remove remote
npm install
npm run start

npm i animate.css

index.js file

import "animate.css"; 추가

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

hooks/index.jsx file

import { useEffect, useRef, useState } from "react";

export const useAnimate = () => {
  const [isObserve, setIsObserve] = useState(false);

  const detectedRef = useRef();
  const observer = useRef();

  useEffect(() => {
    observer.current = new IntersectionObserver(
      (entries) => {
        setIsObserve(entries[0].isIntersecting);
      },
      { threshold: 0.5 }
    );

    observer.current.observe(detectedRef.current);

    return () => observer.current.unobserve(detectedRef.current);
  }, []);

  return { detectedRef, isObserve };
};

App.jsx

import A from "./components/A";
import B from "./components/B";
import C from "./components/C";

const App = () => {


  return (
    <>
      <A />
      <B />
      <C />
    </>
  );
};

export default App;

components/A B C ImageComp jsx.

const A = () => {
  return (
    <div className="bg-black min-h-screen flex flex-col justify-center items-center">
      <img
        className="w-96 h-96  animate__animated animate__zoomIn animate__verySlow animate__infinite"
        src="./images/h662.png"
        alt="h662"
      />
    </div>
  );
};

export default A;

import ImageComp from "./ImageComp";

const B = () => {
  return (
    <div className="bg-blue-100 min-h-screen flex flex-col justify-center items-center gap-20">
      <ImageComp animateName="animate__bounce" image="h662.png" />
      <ImageComp animateName="animate__bounce" image="dd.png" />
    </div>
  );
};

export default B;

import { useAnimate } from "../hooks";

const C = () => {
  const { detectedRef, isObserve } = useAnimate();

  return (
    <div
      ref={detectedRef}
      className="bg-black min-h-screen flex flex-col justify-center items-center"
    >
      <img
        className={`w-96 h-96 ${
          isObserve && "animate__animated animate__rotateOut animate__infinite" //얘가 true일 때만 애니메이션 작동
        } `}
        src="./images/h662.png"
        alt="h662"
      />
    </div>
  );
};

export default C;

import { useAnimate } from "../hooks";

const ImageComp = ({ animateName, image }) => {
  const { detectedRef, isObserve } = useAnimate();

  return (
    <img
      ref={detectedRef}
      className={`w-96 h-96 ${
        isObserve && `animate__animated animate__infinite ${animateName}`
      } `}
      src={`./images/${image}`}
      alt={image}
    />
  );
};

export default ImageComp;