728x90 반응형 keyframes2 [프로젝트] React component: 마운트(mount)될 때와 언마운트(unmount)될 때 각기 다른 애니메이션 적용하기 (feat. onanimationend 프로퍼티) 멋진 웹사이트들을 보면 메뉴 버튼을 클릭했을 때 촤라락~🌼하면서 나왔다가 촤라락~🌼하면서 사라지는 경우를 자주 볼 수 있다. 내 프로젝트에도 메뉴가 토글될 때 그러한 애니메이션을 적용하고 싶어서, 가장 처음 시도했던 건 아래와 같이 slide-in 애니메이션을 만들어서 토글되는 메뉴에 적용시키는 것이었다. // Styled-Components의 keyframes이다. // 토글되는 메뉴의 width 길이 만큼 오른쪽에 숨겨놨다가 나오도록 했다 const slideIn = keyframes` from { right: -500px; } to { right: 0; } `; 그런데, 이렇게 단순히 slideIn 애니메이션만을 추가하면, 한가지 문제가 발생한다. 바로, 메뉴를 토글해서 메뉴 컴포넌트가 마운트될 때.. 2021. 9. 1. [CSS] 움직이는 하늘 배경 만들기 (linear-gradient, background-position, keyframes animation + pointer-events ) 나무 가득한 화면을 만들어보고 싶다는 생각이 문득 들어서, 가지고 있던 어두운 나무 png파일을 이용하여 숲을 조성(?)했다. 그런데 그냥 하늘을 하자니 너무 심심한 것 같아서, gradient를 준 background에 애니메이션을 추가하면 어두운 하늘, 밝은 하늘 등을 나타낼 수 있지 않을까하는 생각에 적용해봤더니 의외로 괜찮은 것 같았다. 구현된 모습 How-To 위와 같이 배경에 애니메이션을 주는 것의 요지는 아래 두가지이다: 1. 배경을 오버 사이즈로 크게 만든다. 2. 화면에 나오는 배경 부분을 keyframes를 통해 바꿔준다. 즉, 우리 눈에 보이는 뷰 사이즈보다 크게 만든 배경의 다른 부분들을 천천히 움직이면서 집중 조명(?)해주는 방식이라고 생각하면 된다. CSS 태그 하나가 화면을 가.. 2021. 6. 4. 이전 1 다음 728x90 반응형
