어떻게하면 로고를 스 와이프 할 수 있으며 페이지에서 스 와이프 할 수 있습니까?

Question

나는 잠시 동안 이것을보고 있었지만 성공하지 못했습니다. 두려웠습니다.

This 사이트는 특히 바닥 글에 정말 멋진 로고 스 와이프가 있습니다.

아래로 스크롤하면 머리글 로고가 위로 스 와이프되고 페이지 아래쪽을 칠 때 로고가 위로 스 와이프되고 안으로/밖으로 들어갑니다.

내가 요소를 검사 만이 관련 CSS를 발견했습니다

#wrap .logo-alt { 
    position:absolute; 
    margin-top:0; 
    -webkit-transition:all 0.3s ease-in-out; 
    -moz-transition:all 0.3s ease-in-out; 
    transition:all 0.3s ease-in-out; 
} 
#wrap .logo-alt.gone { 
    position:absolute; 
    margin-top:200px; 
    pointer-events:none; 
} 

또한이 있습니다

data-scrollspeed="600" and a data-scrollpos="0" 

jQuery를 내가 상상도 거기에있을 것입니다,하지만 어떻게 효과 작업을 정확하게 수행 ? 위에서 언급 한 태그는 무엇입니까? 나는 전에 이것을 보지 못했습니다. JQuery와 코드

Answer 1

이 멋진 애니메이션 거래 :

$(function(){ 
    $(window).scroll(function(){ 
     if($(window).scrollTop() <= ###){ 
     } else { 
     } 
    }); 
}); 

나는 당신을 위해이 기능을 보여주기 위해이 codepen를 만들었습니다.

기본적으로 브라우저의 위치는 애니메이션을 트리거합니다 (이 경우 클래스를 객체에 추가 및 제거하는 것입니다).