スクロールするときにヘッダーにフェードインとアウトのロゴ

私はしたいことをほぼ完了しましたが、誰かが間違っているのを誰が見ることができるか不思議でした。私が最初にページに行くと、CSSアニメーションが点滅します。スクロールするときにヘッダーにフェードインとアウトのロゴ

私は一度ヘッダー・バナー（『.slidesを過ぎてスクロール（」.logo』）私はそれがメニュー上に小さなロゴをフェードインしたい私のバンドのウェブサイト Here's my website

上のロゴやバナーをアニメーション化しようとしています

"）、スクロールバックでフェードバックします。ヘッダーバナーについても同様ですが、逆も同様です。

ここに私のjavacriptコードがあります。

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