BBEB 애니메이션 효과

밀리지 않고 꼬박꼬박 벨로그 작성하는 나 칭찬합니다.





애니메이션 효과를 넣어보겠다.




npm install react-reveal로 설치하면 되는데 의존성 충돌이 발생해 npm install react-reveal --force로 설치해줬다!





사이트에 친절하게 설명이 되어있어서 사용법이 어렵지 않다.

import Bounce from "react-reveal/Bounce";

원하는 효과를 골라서 import 해주고

 <Bounce top cascade>
              이봉이 형제 인기투표 순위
 </Bounce>

그냥 이렇게 감싸주면 된다.

  const bong = [, "일봉", "이봉", "삼봉", , "오봉", "육봉", "칠봉", "팔봉"];

  const back = [
    { bongId: 1, voteScore: 11 },
    { bongId: 2, voteScore: 23 },
    { bongId: 3, voteScore: 555 },
    { bongId: 5, voteScore: 78 },
    { bongId: 6, voteScore: 99 },
    { bongId: 7, voteScore: 115 },
    { bongId: 8, voteScore: 9 },
  ];

  let ebongranking = [
    [back[0]["bongId"], back[0]["voteScore"], spotlight, ebongsad],
    [back[1]["bongId"], back[1]["voteScore"], spotlight, ebongsad],
    [back[2]["bongId"], back[2]["voteScore"], spotlight, ebongsad],
    [back[3]["bongId"], back[3]["voteScore"], spotlight, ebongsad],
    [back[4]["bongId"], back[4]["voteScore"], spotlight, ebongsad],
    [back[5]["bongId"], back[5]["voteScore"], spotlight, ebongsad],
    [back[6]["bongId"], back[6]["voteScore"], spotlight, ebongsad],
  ];

  ebongranking.sort((a, b) => b[1] - a[1]);

백에서 올 정보와 이미지 정보를 임시로 객체로 만들어주고 코드 작성해봤다. 알고리즘 문제 풀 때 썼던 내용들이 자꾸 등장해서 반가웠다! 투표수대로 정렬은 백에서 해준다고해서 삭제할 것 이다.







반복문을 돌리고 있는데 디자인을 보면 123등만 글자 색이 다르다.

 {ebongranking.map((ebongranking, i) => {

...

 <Stack
                        style={{
                          color:
                            i === 0
                              ? "#FFD700"
                              : i === 1
                              ? "#B6B6B6"
                              : i === 2
                              ? "#B48C89"
                              : "white",
                          WebkitTextStroke: i < 3 ? "1px white" : "none",
                          fontFamily: "blackboardbold",
                        }}
                      >

요렇게 처리해줬다!





1~3등은 웃는 표정(사진은 임시) 4~7등은 우는 표정인데

 <img
                    src={i < 3 ? ebongranking[2] : ebongranking[3]}
                    alt="spotlight"
                    width="200px"
                    height="300px"
                  />

이렇게 처리했다!




날이 너무 더워서 글을 좀 대충 쓴 것 같기도 하고..