dobyming / dobyming.github.io Goto Github PK

fade animation in About Page

목적

스크롤을 할때 target element가 viewport에 잡힐때마다 fade 되는 효과를 주고자 함

즉 타겟 엘리먼트를 h1 태그로 잡았을때, viewport상에 h1이 잡히면(True) 애니메이션이 적용이 되지 않고 만약 viewport 상에 잡히지 않는다면(False) scroll 시 해당 애니메이션이 적용된다.

어떻게?

1. fade animation

animation-timeline의 scroll() 속성을 활용할 예정

코드 snippet은 다음과 같음

import { css, keyframes } from '@emotion/react'

const fade = keyframes`
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
  `
  
const exampleDiv = styled.div`
  p {
    animation: fade 1s linear;
    animation-timeline: scroll();
  }
`

2. IntersectionObserver API

scroll 시, 특정 animation을 적용하기 위해선 해당 API를 활용할 것임

참고

IntersectionObserver API
삼항연산자를 활용한 keyframes

useTheme 코드 설명하는 부분에서 isDark 가 아닌 theme으로 코드 수정 필요

Issue

While I Reload the Page, consequently It retain its location but it flickers... and have to solve this bug

fuse.js 에서 query 요청 시, filter 하는 작업으로 resume를 제외하던지 해야할것 같음

about 페이지에 title 값 불러올 수 있도록 작업이 필요해보임

Issue (23.05.27)

When I Reload the page, the SVG Icons seems ugly... such as extension or flickering. need to fix.