Question

我几乎已经完成了我想要做的事情，但是有一个小故障，并想知道是否有人能看到什么是错的。当我第一次进入页面时，CSS动画会闪烁。

我正试图在我的乐队网站Here's my website

上制作徽标和横幅的动画

我想让它在菜单上的小徽标（“。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;
};
}

Answer 1

当你滚动时，它会向.slides添加'reveal'类，因为它与if＆lt;的'else'匹配200条件。这会导致闪烁，因为页面加载时类不存在，但它在滚动时立即添加。

如果你将'reveal'类添加到源代码中的.slides元素（所以当页面加载时它就在那里），闪烁就会消失。

滚动时在标题上淡入和淡出徽标

1 个答案: