–

스크롤은 다양한 화면에서 사용되는 기본 행동 중 하나가 되었습니다. 아무래도 디바이스 해상도에 따라 볼 수 있는 화면과 구성이 정해져 있어, 전체를 보기 위해서는 스크롤이 반드시 필요하기 때문인데요. 오늘 소개할 서비스는 단조로운 스크롤 대신, 웹상에서 더 다채로운 효과를 제공할 수 있는 스크롤 애니메이션 예제를 확인할 수 있는 곳입니다.

이곳에서 우리는 총 9개의 스크롤 기반의 애니메이션 데모(예제)를 확인할 수 있는데요. 리스트 중 하나에 마우스를 가져다 대면 실제 스크롤 애니메이션이 어떻게 동작하는지 바로 확인할 수 있습니다. 또 예제는 각각 CSS, JS으로 (둘 중 하나만 제공되는 경우도 있음) 살펴볼 수 있어요. 한 번씩 경험한 애니메이션도 있고, 낯설지만 신선하게 다가오는 애니메이션도 있어서 하나씩 따져보기 좋은 환경을 제공합니다.

상세화면에서는 데모를 더 자세히 확인할 수 있는데요. 리스트에서는 작은 영역으로 일부만 확인할 수 있지만, 상세화면에서는 전체 화면을 기준으로 스크롤 애니메이션이 어떻게 적용되는지 살펴볼 수 있습니다.

스크롤 애니메이션 데모는 생성된 코드를 상세화면 기준으로 바로 볼 수 있는데요. 오리지널 데모 링크는 물론 애니메이션에 대한 간략한 설명도 담겨있습니다. 자주 쓰이는 애니메이션은 물론, 색다른 애니메이션을 확인할 수 있으며 그에 대한 코드까지 제공하니 실제 적용하는 데 있어 활용도가 높다는 생각이 드네요.

이런 서비스의 가장 큰 역할은 ‘모아주기’인 것 같습니다. 9개가 작게 느껴질 수도 있지만, 이런 예제를 직접 찾기에는 검증까지의 시간이 많이 소요되기 때문인데요. 9개 모두 매력적인 스크롤 애니메이션이라 이곳을 통해 적용하고 싶은, 적용하고 싶었던 애니메이션을 먼저 살펴보는 것도 좋은 방법이 아닐까 싶네요.

스크롤이 얼마나 남았는지 보여주는, 영역을 안내하는 등의 스크롤 적용 관련 툴도 정리되어 있습니다. 스크롤 적용에 대한 아티클도 큐레이션하고 있으니 관련 정보를 한 번에 살펴보기 좋은 환경을 느낄 수 있는 곳입니다. 더 자세한 내용은 ‘링크’를 통해 확인해주세요!

–

Post Views: 97

RELATED ARTICLESMORE FROM AUTHOR