u_ju
우주의 우당탕탕개발일지
u_ju
전체 방문자
오늘
어제
  • 분류 전체보기 (118)
    • 팀 프로젝트 (2)
    • 내배캠 WIL & TIL (91)
    • JS (0)
    • React (1)
    • CS (23)
    • Next (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 배열#함수
  • 일요일 오늘은 내가 바로 함수만들기 요리사 !
  • 회의감#현타#나름뿌듯#고민거리#코딩#IT#CSS#JS
  • Component를 처음 선언하는 것을 Mount 라고 한다던데...?#props #state
  • 코딩#바보#오류투성이#팀프로젝트

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
u_ju

우주의 우당탕탕개발일지

내배캠 WIL & TIL

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

2023. 3. 7. 12:40

지난 시간에는 랜딩 페이지의 애니메이션을 실행시키기 위하여, 스크롤 이벤트를 활용하려했지만. 그로 인해서 스크롤 시 이벤트가 계속해서 발생하여 전체적으로 부하, 쓰로틀링 등 최적화 되지않은 상태를 야기하였다. 

 

그를 해결하기 위해 () 를 사용하였고, 그 결과 코드는 아래와 같다.

 

초기 문제로는 isAnimated 의 값이 정상적으로 true가 되지만 이미지의 애니메이션은 새로고침시 작동하는 문제가 있었다.

코드에서 애니메이션이 useEffect로 인해 isAnimated의 값이 true로 변경되면, 해당 컴포넌트의 className 속성에 "animated" 값을 추가하는 것으로 애니메이션 효과를 적용하고 있었고,

 

이를 해결하기위해서 styled-components로 작성한 CSS 코드에서 ".animated" 클래스를 가진 img 태그에 대한 애니메이션 효과를 적용시키도록하여, ".animated" 클래스에 대한 CSS 코드를 작성했다.

  리펙토링 전
  
  img {
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
  }

  img:nth-child(1) {
    animation: fadeInUp 1s ease forwards;
    animation-delay: 0.5s;
  }

  img:nth-child(3) {
    animation: fadeInUp 1s ease forwards;
    animation-delay: 1s;
  }

  img:nth-child(2) {
    animation: fadeInUp 1s ease forwards;
    animation-delay: 1.5s;
  }

  img.animated {
    opacity: 1;
    animation: fadeInUp 1s ease forwards;
  }

  @keyframes fadeInUp {
    from {
      transform: translateY(20%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
리펙토링 후

  img {
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
  }

  img.animated {
    animation: fadeInUp 1s ease forwards;
  }

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

  img:nth-child(3) {
    animation-delay: 1s;
  }

  img:nth-child(2) {
    animation-delay: 1.5s;
  }

  @keyframes fadeInUp {
    from {
      transform: translateY(20%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
`;

'내배캠 WIL & TIL' 카테고리의 다른 글

TIL) 스파르타 개발일지 23-03-08  (0) 2023.03.08
TIL) 스파르타 개발일지 23-03-06  (0) 2023.03.06
TIL) 스파르타 개발일지 23-02-23  (0) 2023.02.23
TIL) 스파르타 개발일지 23-02-22  (0) 2023.02.22
TIL) 스파르타 개발일지 23-02-21  (0) 2023.02.22
    '내배캠 WIL & TIL' 카테고리의 다른 글
    • TIL) 스파르타 개발일지 23-03-08
    • TIL) 스파르타 개발일지 23-03-06
    • TIL) 스파르타 개발일지 23-02-23
    • TIL) 스파르타 개발일지 23-02-22
    u_ju
    u_ju

    티스토리툴바