나는 http://charactersf.com/ 사이트를보고 있으며, 처음 4 개의 "레이어"사이에 배경 이미지/내용이 어떻게 변경되는지 파악하려고합니다. 마우스를 모두 스크롤하면 이미지를 정렬하기 위해 맨 아래로 이동합니다. 정말이 주제에 대한 더 많은 독서를하고 싶습니다. 적어도 나 자신을 볼 수 있도록 호출 된 것을 찾아 내고 싶습니다. 감사합니다!CSS 점프 스크롤 위치
어떤 브라우저를 사용하고 있습니까? Chrome과 Firefox 모두 f12 디버그 모드를 허용합니다. 조심히 살펴보고 마우스 스크롤을 사용하여 li 요소의 클래스를 변경하는 것으로 나타납니다. 슬라이드가 표시되면 클래스가 slide active으로 변경됩니다. 이미 슬라이드를 스크롤하면 클래스가 slide old으로 변경됩니다. 슬라이드가 여전히 표시되는 경우 클래스는 기본적으로 slide입니다.
이 작업은 CSS가 아니라 자바 스크립트로 수행됩니다.
마우스 휠 스크롤 이벤트에서 코드를 실행하고 페이지 스크롤을 차단하는 방법에 관한이 주제를 참조하십시오. Javascript: Capture mouse wheel event and do not scroll the page?
내 생각에 배경과 함께 볼 수있는 것은 자바 스크립트 이미지 슬라이더 플러그인입니다. 따라서 마우스 휠 이벤트에있을 때 슬라이더의 기능을 호출하여 다음 이미지로 이동합니다. 슬라이드 다운 효과는 플러그인에서 설정 한 슬라이드 효과입니다. 선택하는 플러그인에 따라 이러한 옵션을 설정할 수 있습니다. 불행히도 나는 슬라이더를 사라지게하는 방법에 대한 anwser를 가지고 있지 않으며 마지막 이미지 이후에 다른 내용이 부드럽게 표시되지만 슬라이더를 제거하고 스크롤바 위치가 0.
희망이 있습니다!
jquery 플러그인이 아닙니다.
main.js 파일을 제외하고 헤더에 jquery 라이브러리에 대한 참조가없는 것은 모든 사용자 정의 항목 인 것 같습니다. 스크롤 이벤트 감지, jquery/css 조작의 조합. 처음에는 body 태그가 overflow : hidden이고 각 슬라이드가 표시 될 때 OnComplete 함수는 body 태그에서 overflow : hidden을 제거하고 슬라이드 DIV의 위쪽 위치를 위쪽으로 밀어 변경합니다. 전환을 용이하게하기 위해 CSS3이 사용됩니다.
이것은 시차 효과입니다. – V31