TIL) 스파르타 개발일지 23-03-08

동전이 떨져서 쌓이는 애니메이션을 구현하고 싶었다...

처음에는 해당페이지에서 애니메이션을 구현하다가 함수까지 추가하면 너무 길어질걸 알기에... 

 

미리 컴포넌트로 빼서 작성하였다.

코드는 아래와 같다. (이것도 너무 길어...)  구현하고보니 이미지 3개로 쌓이는 이미지를 나타내는 것은 어렵다는 생각이 들어서... 맵을 돌려서 해당 이미지를 반복적으로 나타내고, translateX속성을 사용해서 위치만 좀 건들여주기로했다. 

 

리펙토링 전

import React, { useRef, useEffect, useState } from "react";
import styled from "styled-components";

const SecondSectionImgAnimation = (direction, duration, delay) => {
  const SecondSectionRef = useRef();
  const [isAnimated, setIsAnimated] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        const [entry] = entries;
        if (entry.isIntersecting) {
          setIsAnimated(true);
        }
      },
      { threshold: 0.5 }
    );

    observer.observe(SecondSectionRef.current);

    return () => observer.disconnect();
  }, [isAnimated]);
  console.log(isAnimated);

  return (
    <SecondImgContainer ref={SecondSectionRef}>
      <SecondImgTwo>
        <img
          className={isAnimated ? "animated" : ""}
          style={{
            position: "absolute",
            marginTop: "230px",
            marginLeft: "-50px",
          }}
          src={require("../../assets/landing/SecondImg2-1.png")}
          alt="secondImg1"
        />

        <img
          className={isAnimated ? "animated" : ""}
          style={{
            position: "absolute",
            marginTop: "230px",
            marginLeft: "-110px",
          }}
          src={require("../../assets/landing/SecondImg2-2.png")}
          alt="secondImg2"
        />

        <img
          className={isAnimated ? "animated" : ""}
          style={{
            position: "absolute",
            marginTop: "230px",
            marginLeft: "10px",
          }}
          src={require("../../assets/landing/SecondImg2-3.png")}
          alt="secondImg3"
        />
      </SecondImgTwo>
    </SecondImgContainer>
  );
};

const SecondImgContainer = styled.section`
  //* 반응형 레이아웃
  width: 100%;
  max-width: 1400px;
`;

const SecondImgTwo = styled.div`
  img {
    opacity: 0;
    transform: translateY(-200%);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  img.animated {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
  }

  img:nth-child(1) {
    transition-delay: 0.5s;
  }

  img:nth-child(2) {
    transition-delay: 1s;
  }

  img:nth-child(3) {
    transition-delay: 1.5s;
  }
`;

export default SecondSectionImgAnimation;

 

리펙토링 후