스크롤 할 때 머리글에 페이드 인 및 아웃 로고가 붙습니다.

나는 거의하고 싶은 일을 거의 끝냈습니다. 그러나 누군가가 틀린 것을 볼 수 있는지 궁금해하고 있습니다. 처음 페이지로 이동하면 CSS 애니메이션이 깜박입니다.스크롤 할 때 머리글에 페이드 인 및 아웃 로고가 붙습니다.

내가 "(한 번 헤더 배너 과거 스크롤 Here's my website

내가 그것을 메뉴 (".logo ")의 작은 로고 퇴색 할 내 밴드의 웹 사이트에 로고 및 배너 애니메이션 .slides하려고 ") 스크롤을 뒤로하고 페이드 아웃합니다. 또한 헤더 배너와 동일하지만 반대의 경우도 마찬가지입니다.

여기에 지금 자바 스크립트 코드가 있습니다.

jQuery(document).on("scroll", function(){ 
    if 
    (jQuery(document).scrollTop() > 200){ 
     jQuery(".logo").addClass("reveal"); 
    } 
    else 
    { 
     jQuery(".logo").removeClass("reveal"); 
    } 
}); 

jQuery(document).on("scroll", function(){ 
    if 
    (jQuery(document).scrollTop() > 200){ 
     jQuery(".slides").removeClass("reveal"); 
    } 
    else 
    { 
     jQuery(".slides").addClass("reveal"); 
    } 
});

여기에 당신이이 경우 < 200 조건의 '다른'를 일치로 스크롤 할 때 그것은 .slides에 '공개'클래스를 추가하는 CSS 코드

.slides { 
opacity: 1; 
} 


.logo { 
opacity: 0; 
} 

.reveal { 
opacity: 1; 
-webkit-animation: reveal 0.4s ease-in-out; 
-moz-animation: reveal 0.4s ease-in-out; 
} 

@-moz-keyframes reveal { 
from { 
    opacity: 0; 
} 

to { 
    opacity: 1; 
}; 
} 

@-webkit-keyframes reveal { 
from { 
    opacity: 0; 
} 

to { 
    opacity: 1; 
}; 
}

출처

2017-04-13 Luke Snitter