2011-02-09 8 views
1

나는이 HTML5 웹 사이트, http://www.danhigbie.com을보고 "배경 이미지의 스크롤링"매혹을 발견했습니다. 자바 스크립트를 살펴 보았지만 배경 이미지를 변경하는 코드는 발견되지 않았습니다.이 "스크롤 및 여러 배경 그림 변경"효과는 어떻게 달성합니까?

+1

을 여기에 또 다른 (더 나은, 내가 생각하는) 예제 : 여기 –

+0

훌륭한 사이트 phoffer ... 젠장, 그 배경 이미지 효과를하는 방법을 알아야합니다 .. 지긋 지긋한 모습을 보입니다. – p0larBoy

답변

1

웹 페이지를 디스크에 저장하고 better.jsbetter.cs 파일로 재생하십시오. 배경 스크롤은 better.css에 정의 된 CSS 클래스를 변경하여 better.js 파일에서 수행됩니다.

+0

나는 여전히 그것을 얻지 못합니다. better.js에서 특정 스크롤 높이에 도달하면 '더 나은'클래스와 '스크롤 된'클래스 만 추가됩니다. 다른 클래스는 배경 변경에 영향을주지 않습니다. 첫 번째 bg (갈색 벽)은 아래에서 두 번째 bg (푸른 하늘)로 어떻게 이동합니까? – p0larBoy

1

나는 스크롤 위치에 따라 multiplebgs의 배경 위치를 변경하는 일부 jQuery를 사용하고 있습니다 : 그 효과 작업 방법을 설명하는 좋은 기사를 발견했다. 각 배경 이미지 요소는 백분율로 상단에서부터 위치하며, 섹션 당 배경 이미지가 너무 많기 때문에 따르기가 다소 어려울 수 있습니다. 각 배경 요소의 세로 위치 값을 가져 와서 현재 스크롤 막대 위치에 따라 수정합니다. 희망이 도움이됩니다. http://stolksdorf.github.com/Parallaxjs/

+0

와우 그 남자! 그런데 훌륭한 웹 사이트 ~! – p0larBoy

0

당신을 위해이 작업을 수행하고 정말 잘 작동하는 것 같다 자바 스크립트 라이브러리입니다. http://www.nikebetterworld.com/index
관련 문제