135일차 - 프로젝트 16일차

프로젝트

추석때 제사를 지내러 내려갔다가 저녁을 먹고 올라와서 프로젝트를 다시 시작했다.
오늘은 Main Page FadeIn 작업을 하기위해 고군분투 중이다.
Styled-Components에서 랜더링시 FadeIn이 되게 하는 방법은 찾았지만, 아직 스크롤을 해서 해당 페이지로 이동시 FadeIn이 되는 애니메이션 효과는 찾지 못해서 서칭중이다.

Dev Log

오늘은 어떻게 프로젝트에 기여했나요?

• 마지막 페이지 완성
• LandingPage 글씨 FadeIn 애니메이션

오늘의 프로젝트에서 힘든 점은 무엇인가요?

• Styled-Components로 랜더링시 FadeIn이 되는 법은 배웠는데, 스크롤시 애니메이션은 아직 서칭중이다.
  랜딩시 FadeIn 애니메이션을 코드에 첨부하겠다.

import styled, { keyframes } from 'styled-components';

const fadeIn = keyframes`
  from {
    opacity: 0;
  };
  to {
    opacity: 1;
  };
`;

const fadeInBox = styled.div`
  animation-duration: 4s;
  animation-timing-function: ease-out;
  animation-name: ${fadeIn};
  animation-fill-mode: forward;
`;

내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

• 스크롤시 FadeIn 되는 애니메이션 구현

추가

랜더링시 FadeIn이 되는 애니메이션 효과