자 바스 크 립 트 를 통 해 구현 되 지 않 은 자동 스크롤 시차 효과

이 효 과 는 Chirs Coyier 의 시차 튜 토리 얼 을 모방 하여 이 루어 졌 으 며,Chirs 의 허락 을 받 아 밤하늘 배경 을 사용 했다.
실행 효과:여기에서 보기:http://www.fofronline.com/experiments/parallax/#experiment이 효 과 는 Safari 4 Beta 와 Google Chrome 에서 정상적으로 미리 볼 수 있 습 니 다.이 효 과 는 JavaScript 가 필요 하지 않 습 니 다.(그러나 IE7 및 이하 버 전에 서 는 볼 수 없다)
실현 방법:이 페이지 의 HTML 코드 는 매우 간단 합 니 다.하나의 div 를 통 해 배경 을 정의 하고 다른 div 를 통 해 내용 을 정의 합 니 다.여 기 는 CSS 3 의 다 중 배경 기술 을 사 용 했 기 때문에 다른 태그 로 다른 배경 그림 을 표시 해 야 합 니 다.

CSS 배경 용 기 를 고정된 위치 에 설정 하고 top,left,bottom,righ 속성 을 통 해 페이지 의 아래쪽 을 차지 합 니 다.배경 그림 은 background 속성 을 통 해 지정 합 니 다.가장 먼저 지정 한 것 은 최상 위 배경 입 니 다.모든 그림 은 백분율 에 따라 위 치 를 정 하고 그들의 위 치 는 각각 다르다.그러면 용기 의 크기 가 바 뀌 면 각 그림 이 이동 하여 시차 효 과 를 낸다.
일반적인 생각 에 따 르 면 페이지 가 크기 조정 되 거나 자바 스 크 립 트 로 제어 할 때 만 애니메이션 효 과 를 낼 수 있 습 니 다.여 기 는 다른 방법 을 사용한다.배경 그림 용기 의 왼쪽 을 이동 시 킵 니 다(예 를 들 어 0px 에서 100 px 까지).이 는 용기 의 전체 폭 을 변화 시 켜 배경 그림 을 백분율 에 따라 어느 정도 이동 시 킬 수 있다.시간 길이 와 왼쪽 위 치 를 충분히 설정 하면 연속 적 인 시차 이동 효과 가 발생 합 니 다.

이동 속 도 를 높 여 더 재 미 있 는 효 과 를 얻 을 수 있 고 마우스 동작 도 추가 할 수 있 습 니 다.최종 CSS 코드 는 다음 과 같 습 니 다.

작은 자료:시차 효 과 는 원래 천문학 용어 로 우리 가 별 을 관찰 할 때 우리 와 멀리 떨 어 진 별 은 이동 속도 가 느 리 고 우리 와 가 까 운 별 은 이동 속도 가 빠르다.우리 가 차 에 앉 아 차창 밖 을 내다 볼 때 도 이런 느낌 이 든다.먼 곳 의 산 들 은 움 직 이지 않 는 것 같 지만 가 까 운 논 은 빠르게 스 쳐 지나 가 고 있다.많은 게임 에서 시차 효 과 를 사용 하여 장면 의 입체 감 을 증가 시킨다.조 사 갑