React-fullpage 적용하기, 로고에 keyframe 추가

로켓 CV 서비스의 메인페이지가 좀 허전해서 fullpage를 적용하여 자연스럽고 세련된 메인페이지로 탈바꿈하려고 한다.

fullpage 적용

react-fullpage를 설치해주고

npm i react-fullpage

import 해준 뒤,

import { SectionsContainer, Section } from 'react-fullpage';

옵션에서 fullpage 설정을 하고

const options = {
    activeClass: 'active', // the class that is appended to the sections links
    anchors: ['One', 'Two', 'Three'], // the anchors for each sections
    arrowNavigation: true, // use arrow keys
    delay: 900, // the scroll animation speed
    navigation: false, // use dots navigatio
    scrollBar: false, // use the browser default scrollbar
  };

섹션안에 출력할 컴포넌트를 넣고, 섹션컨테이너로 감싸준다.

<SectionsContainer {...options}>
        <Section>
          </컴포넌트>
        </Section>
</SectionsContainer>

fullpage 적용은 되었지만 css가 엉망이 되버렸다. 얼른 수정해야지!

트랜지션 적용

로고를 좀 더 생동감 있고 멋지게 바꾸고 싶어 트랜지션을 적용하였다.
마우스를 갖다 대면 로고가 살짝 비틀어진다!

    transition: 0.3s ease-in-out;

    :hover {
      transform: rotateY(-20deg);
    }

더욱 재미있는 로고가 되었다!