나는이 HTML5 웹 사이트, http://www.danhigbie.com을보고 "배경 이미지의 스크롤링"매혹을 발견했습니다. 자바 스크립트를 살펴 보았지만 배경 이미지를 변경하는 코드는 발견되지 않았습니다.이 "스크롤 및 여러 배경 그림 변경"효과는 어떻게 달성합니까?
답변
웹 페이지를 디스크에 저장하고 better.js
및 better.cs
파일로 재생하십시오. 배경 스크롤은 better.css
에 정의 된 CSS 클래스를 변경하여 better.js
파일에서 수행됩니다.
나는 여전히 그것을 얻지 못합니다. better.js에서 특정 스크롤 높이에 도달하면 '더 나은'클래스와 '스크롤 된'클래스 만 추가됩니다. 다른 클래스는 배경 변경에 영향을주지 않습니다. 첫 번째 bg (갈색 벽)은 아래에서 두 번째 bg (푸른 하늘)로 어떻게 이동합니까? – p0larBoy
단순히 "다른"섹션의 배경 위치를 고정으로 선언하여 효과를냅니다.
나는 스크롤 위치에 따라 multiplebgs의 배경 위치를 변경하는 일부 jQuery를 사용하고 있습니다 : 그 효과 작업 방법을 설명하는 좋은 기사를 발견했다. 각 배경 이미지 요소는 백분율로 상단에서부터 위치하며, 섹션 당 배경 이미지가 너무 많기 때문에 따르기가 다소 어려울 수 있습니다. 각 배경 요소의 세로 위치 값을 가져 와서 현재 스크롤 막대 위치에 따라 수정합니다. 희망이 도움이됩니다. http://stolksdorf.github.com/Parallaxjs/
와우 그 남자! 그런데 훌륭한 웹 사이트 ~! – p0larBoy
- 1. 스크롤 뷰어에 그림 추가하기
- 2. textview에 대한 배경 그림
- 3. ASP.Net 배경 그림 뒤에서로드
- 4. 배경 스크롤
- 5. 그림의 배경 컬러 그림 상자
- 6. 배경 그림 사용 안 함
- 7. 큰 사이트는 행 수준 권한을 어떻게 달성합니까?
- 8. CSS : 배경 스크롤 유지
- 9. 어떻게 asp.net 데이터 종속성 캐싱을 달성합니까?
- 10. Cocos2D 세로 스크롤 배경
- 11. 캡틴이있는 라텍스의 여러 그림
- 12. 어떻게 자동으로 그림 상자를 노출하도록 패널을 스크롤 할 수 있습니까?
- 13. 배경 100 % 스크롤 문제
- 14. 얼마나 정확하게 높이를 달성합니까?
- 15. 어떻게 두 이미지 UIImage 만들 수 있습니다 : 그림 및 테두리
- 16. CSS : 배경 결석 스크롤 수평으로
- 17. 사용자 정의 그림 Windows Forms 스크롤 막대?
- 18. 여러 이미지 선택 배경 이미지
- 19. 이 배경 효과는 어떻게 만들 수 있습니까?
- 20. 라이브 배경 미리보기 축소판 그림 크기
- 21. 더 이상 배경 스크롤 페이지
- 22. UITableView에 대한 스크롤 배경 이미지?
- 23. css3 및 스프라이트를 사용하는 여러 배경 이미지
- 24. Silverlight Toolkit - 여러 ChildWindows 및 배경
- 25. 모바일 Safari에서 여러 스크롤 막대가있는 페이지 스크롤
- 26. 여러 배경 이미지
- 27. CSS 여러 배경
- 28. 스크롤하는 내용으로 스크롤 할 배경 이미지를 어떻게 설정할 수 있습니까?
- 29. CSS (배경 - 첨부 : 스크롤)를 사용하여 콘텐츠로 스크롤 할 배경 이미지를 얻을 수 없습니다.
- 30. jquery가 로딩되는 배경 그림 위치에 애니메이션을 적용 할 수 있습니까?
을 여기에 또 다른 (더 나은, 내가 생각하는) 예제 : 여기 –
훌륭한 사이트 phoffer ... 젠장, 그 배경 이미지 효과를하는 방법을 알아야합니다 .. 지긋 지긋한 모습을 보입니다. – p0larBoy