Я почти закончил то, что хочу сделать, но есть глюк, и мне интересно, может ли кто-нибудь увидеть, что не так. Когда я впервые захожу на страницу, мигает анимация CSS.
Я пытаюсь анимировать логотип и баннер на сайте моей группы Вот мой сайт
Я хочу, чтобы он исчезал в маленьком логотипе в меню («.logo») после прокрутки за баннером заголовка («.slides») и исчезал обратно с прокруткой вверх. То же самое, но наоборот для баннера заголовка.
Вот мой код 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");
}
});
Вот код 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;
};
}
