0
我几乎完成了我想要做的事情,但出现了一个小故障,并想知道是否有人可以看到什么是错误的。当我第一次浏览页面时,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;
};
}