목록시차애니메이션 (1)

DOG FOOT

[CSS3] pure CSS로 parallax scrolling 구현하기

안녕하세요, 김선진입니다. 이번에 회사에서 기능 소개 랜딩 페이지를 만들면서, 디자이너 분께 parallax scrolling으로 해줬으면 한다는 부탁을 받았는데요! 솔직히 처음 들어본 이름이라 생소했는데, (14년도 쯤에는 유행이었다고 합니다.) 애플의 제품소개 페이지에서 사용된 기능을 parallax라고 칭한다는 걸 알았습니다. 어쨌든, 이번에는 이 parallax scrolling을 pure css로 구현하는 방법에 대해 써보겠습니다. (opacity가 변경되는 trigger 형식의 애니메이션 같은 경우는... 따로 구현했습니다) 0. 서론 먼저, Parallax란? 직역하면 '시차'다. 천문학에서 가까이 있으면 빠르게 움직이고 멀리있으면 느리게 움직인다고 하는 그 개념이다. 시차 (Parallax..
뚱땅뚱땅 2020. 11. 22. 22:00
이전 Prev 1 Next 다음