10 시간 동안 똑바로 봤는데 여러 가지 유형의 위치를 시도했지만 작동하지 않습니다. 페이지를 아래로 스크롤하고 탐색 배경이 투명 배경에서 흰색 배경으로 바뀌는이 흥미로운 효과를 재현 할 수 없습니다. 이 예제는 http://www.bakkenbaeck.no/에서 찾을 수 있습니다. 누구든지 올바른 방향으로 나를 가리킬 수 있습니까?네비게이션이 투명 배경에서 색이 바뀐 배경으로 바뀝니다.
TL; DR이 효과는 HTML과 CSS뿐만 아니라 일부 JS가이 효과를 없애기 위해 필요합니다.
당신이 준 예제에 대해 특별히 언급하고있는 내용을 약간 추측하고 있지만 사용자가 초기 전체 높이 이미지를 스크롤하면 발생하는 변경 사항을이 게시물에서 가정합니다 로고가 흰색에서 회색으로 바뀌고이 nav 영역의 배경이 흰색으로 변하는 것을 볼 수 있습니다.
당신의 기술 수준이나 지식을 알지 못해서 당신에게 어떤 방향으로 나아갈 지에 대한 가정을하기가 힘들지 만 최선을 다할 것입니다. 여기서 일어나는 일은 CSS z-index, 일부 자바 스크립트 및 중복 메뉴를 창의적으로 사용하는 것입니다. 웹 페이지를 종이 더미로 생각하면 첫 번째 종이는 두 번째 페이지 위에있는 메뉴, 시작 이미지, 세 번째 페이지, 다음 (복제) 메뉴입니다. 복제 메뉴는 첫 번째 메뉴 바로 아래에 배치됩니다. 아래로 스크롤하면 중간 이미지 레이어가 제거되고 새로운 탐색은 일부 JS를 통해 노출됩니다. 현재 페이지가 스크롤되는 위치를 확인하는 페이지 스크롤 이벤트 리스너 (javascript)가 있습니다. 사용자가 로고와 탐색이 변경되어야하는 지점에 도달하면 javascript가 시작되어 첫 탐색의 높이가 설정 될 때까지 스크롤 지점을 지나서 1px마다 첫 번째 탐색의 높이를 작게 설정합니다. 효과적으로 숨기는 0px의 높이. 두 가지 탐색을 모두 검사하여 크롬 웹 도구를 살펴 본다면 스크롤 할 때 이러한 현상 (탐색의 높이가 줄어드는 현상)을 볼 수 있습니다.
사이트에서 http://pagescroller.com/을 사용하고있는 것을 볼 수 있습니다.이 플러그인은 내가 설명했던 높이 조정을 트리거하는 데 사용하는 플러그인 일 가능성이 높습니다.
희망은 당신에게 어떤 방향을 제공합니다!
Reaserch Paralax 스크롤이 많은 자습서는 온라인과 당신이 그들을 여기에 몇 가지 제가 사용하고있다 단계적으로 따르는 경우에 당신은 아주 쉽게 찾을 수 JS와 당신이 익숙하지 않은 경우 :
http://www.impressivewebs.com/parallax-scrolling-scripts-plugins/
그것은이다 정말 쉽게 jQuery가 Google에 많은 예제가 있다는 것을 협박하게하지 마십시오!
안녕하세요, 제발 당신이 코드를 게시 할 수 있습니다. 소스를 조사하기 위해 방화범과 같은 것을 사용 했습니까? 그 전이에서 사용 된 일부 jQuery를 참조하십시오. –
방화범을 사용하여 페이지 상단에 두 개의 헤더가있는 것으로 보입니다. 위치를 사용하지 않으면이 효과를 볼 수 있습니다. 머리글 요소에 고정 됨 –
crome을 사용하고 자원 탭에서 요소 클릭을 검사하고 폴더 스크립트를 찾은 다음 스크립트 jquery.pagescroller.js를 살펴 봅니다. 주석 처리되었습니다. 밖으로 –