패럴랙스 스크롤링 예제

터널 크릭에서 눈사태의 공포에 대한 기사, 12 월에 온라인으로 게시 된 2012 하지만 여전히 시차 스크롤로 무엇을 할 수 있는지의 예로 강한 서. 이 신문은 전 세계 디자인 커뮤니티의 관심을 사로잡은 혁신적인 방식으로 퓰리처 상을 수상한 기사를 선보였습니다. 우리가 본 시차 스크롤의 가장 아름다운 예 중 하나는 깊이의 감각을 만들기 위해 여섯 이동 레이어를 사용하는 게임 파이어 워치에 대한이 웹 사이트입니다. 스크롤 하이재킹 (종종 시차 효과를 동반하는 것)이 없기 때문에 훌륭하며 페이지의 맨 위에만 사용되므로 사이트의 나머지 부분만 여전히 배멀미가없는 정보를 읽을 수 있습니다. 어떻게 하는지 보고 싶다면 CodePen에서 멋진 데모를 소개합니다. „이를 위해 HTML5, CSS3, JavaScript/jQuery, 웹 오디오/HTML5 오디오 및 시차 스크롤과 같은 몇 가지 기존 기술과 기술을 살펴보았습니다. 도전과제는 이러한 모든 방법을 모든 플랫폼에서 하나의 매력적인 경험에 통합하는 독특한 접근 방식을 찾는 것이었습니다.“ 이 작업을 수행하는 방법을 보여주기 위해, 여기에 좋은 효과에 기술을 사용하는 몇 가지 사이트가 있습니다. 경우에 따라 시차 스크롤이 쇼의 스타입니다. 다른 사람에 그것은 단순히 전경 을 조금 튀어 나게 하는 깊이의 터치를 추가 합니다.

그리고 만약 당신이 정말로 보트를 밀어 내고 싶다면, 이 인상적인 CSS 애니메이션 예제는 귀하의 웹사이트를 군중에서 돋보이게 하는 또 다른 좋은 방법을 보여줍니다. 이제 시차 스크롤을 사용하여 일부 사이트를 매우 올바른 방법으로 살펴보겠습니다. 예술 컨설팅 문화 솔루션은 미묘한 시차 스크롤 효과를 사용하여 홈페이지에 깊이를 소개합니다. 주요 브랜드 이미지는 다채로운 원을 사용하는 것입니다 – 배경의 원은 전경에있는 것보다 느리게 이동하여 미묘한 3D 효과를 만듭니다. 비슷한 맥락에서, 가든 스튜디오는 또한 대부분 정적 페이지로 이동하기 전에, 사이트의 상단에 분별있고 유쾌한 방법으로 시차 기술을 사용하기로 결정했다. 변화하는 풍경은 미묘하고 눈에 거슬리지면서도 쇼의 스타이기도 합니다 – 우리는 계속해서 위아래로 스크롤하는 것을 발견했습니다. 스크롤은 가로및 세로 둘 다일 수 있습니다. 세로 스크롤은 가장 일반적인 하나, 일반적으로, 웹 브라우저는 브라우저 창의 너비에 맞게 한 줄에 많은 단어를 배치 하 고 텍스트 화면 크기를 능가 하는 경우, 세로 스크롤 읽기를 계속 해야 합니다. 가로 스크롤은 포트폴리오 및 갤러리 웹 사이트에서 잘 작동하지만 텍스트 기반 사이트는 그렇지 않습니다.