JavaScript_Experience 교환 없이 자동 스크롤 시차 효과

이 효과는 Chris Coyier의 시차 튜토리얼을 모델로 했으며, 별이 빛나는 하늘 배경은 Chris의 허가를 받아 사용되었습니다.

실행 효과:
여기에서 보기: http://www.fofronline.com/experiments/parallax/#experiment
이것은 효과는 Safari 4 Beta 및 Google Chrome에서 정상적으로 미리 볼 수 있으며 이 효과를 얻기 위해 JavaScript가 필요하지 않습니다.
(단, IE7 이하에서는 볼 수 없습니다)

구현 방법:
이 페이지의 HTML 코드는 매우 간단합니다. 하나의 div는 배경을 정의하는 데 사용되며 다른 div는 배경을 정의하는 데 사용됩니다. 여기서는 CSS3가 사용됩니다. 에서는 다중 배경 기술이 사용되므로 다른 배경 이미지를 표현하려면 추가 태그가 필요합니다.

CSS 배경 컨테이너를 고정 위치로 설정하고 상단, 왼쪽, 하단 및 오른쪽 속성을 통해 페이지 하단을 차지하도록 합니다. 배경 이미지는 background 속성을 통해 지정되며, 최상위 배경이 먼저 지정됩니다. 각 이미지는 백분율에 따라 배치되고 위치가 다르기 때문에 컨테이너의 크기가 변경되면 각 이미지가 이동하여 시차 효과가 발생합니다

일반적인 생각에 따르면 애니메이션 효과는 페이지를 확대하거나 JavaScript를 사용하여 제어해야 생성될 수 있습니다. 여기서는 또 다른 방법이 사용됩니다. 배경 이미지 컨테이너의 왼쪽 가장자리를 이동합니다(예: 0px에서 100px로). 이렇게 하면 컨테이너의 전체 너비가 변경되어 백분율에 따라 배경 이미지가 다르게 움직입니다. 지속 시간과 왼쪽 위치를 충분히 크게 설정하면 연속 시차 이동 효과가 생성됩니다.

이동 속도를 높여 더욱 흥미로운 효과를 얻을 수 있으며, 마우스 동작을 추가할 수도 있습니다. 최종 CSS 코드는 다음과 같습니다.

작은 정보: 시차 효과는 원래 천문학 용어입니다. 별이 빛나는 하늘을 관찰할 때 우리에게서 멀리 있는 별은 느리게 움직이고, 우리에게 가까운 별은 더 빠르게 움직입니다. 차에 앉아 창밖을 내다보면, 저 멀리 산은 움직이지 않는 것 같지만, 근처의 논은 빠르게 지나가는 느낌도 듭니다. 시차 효과는 장면에 3차원 느낌을 추가하기 위해 많은 게임에서 사용됩니다. (번역/조시자)