7
我想制作一些类似于您向下滚动的网站，以及一些动画通过滚动进行跟随，如果向上滚动则会反转。如何绑定css动画的持续时间以滚动
我看到一些图书馆像this但我想看看它可以做一些更简单的方法？
感谢
$(document).ready(function(){
var lastScrollTop = 0;
$(document).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
$('div').removeClass('scrollUp').addClass('scrollDown');
} else {
$('div').removeClass('scrollDown').addClass('scrollUp');
}
lastScrollTop = st;
});
});body{
height: 150vh;
overflow-y: auto;
}
div {
width: 100px;
height: 100px;
position: fixed;
}
@keyframes myfirst {
0% {background: rgba(0,0,0,0); top: 0px;}
100% {background: rgba(0,0,0,1); top: 400px;}
}
.scrollDown{
animation-name: myfirst;
animation-duration: 5s;
animation-direction: alternate;
}
.scrollUp{
animation-name: myfirst;
animation-duration: 5s;
animation-direction: alternate-reverse;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>除此之外我只是想上滚动变化的关键帧，使100％或动画的改变向下滚动年底和0％，通过滚动起来，但它不工作：
$(document).ready(function(){
var lastScrollTop = 0;
$(document).scroll(function(event){
var st = $(this).scrollTop();
$('head>style').last().remove();
if (st > lastScrollTop){
$('head').append('<style>@keyframes myfirst{0%{background: rgba(0,0,0,0); top: 0px;}100%{background: rgba(0,0,0,1); top: '+st+'px;}}</style>');
$('div').removeClass('scrollUp').addClass('scrollDown');
} else {
$('head').append('<style>@keyframes myfirst{0%{background: rgba(0,0,0,0); top: '+st+'px;}100%{background: rgba(0,0,0,1); top: '+lastScrollTop+'px;}}</style>');
$('div').removeClass('scrollDown').addClass('scrollUp');
}
lastScrollTop = st;
});
});body{
height: 150vh;
overflow-y: auto;
}
div {
width: 100px;
height: 100px;
position: fixed;
border: 1px solid black;
}
.scrollDown{
animation-name: myfirst;
animation-duration: 0s;
animation-direction: alternate;
}
.scrollUp{
animation-name: myfirst;
animation-duration: 0s;
animation-direction: alternate-reverse;
}<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<div></div>WITH TRANSITION SOLUTION（WITHOUT关键帧）
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<style>
body{
height: 150vh;
overflow-y: auto;
}
div {
width: 100px;
height: 100px;
position: fixed;
border: 1px solid black;
opacity: 0;
transition: opacity 0s ease;
background: rgb(0,0,0);
}
</style>
</head>
<body>
<div></div>
<script>
$(document).ready(function(){
var lastScrollTop = 0;
$(document).scroll(function(event){
var st = $(this).scrollTop();
$('head>style').last().remove();
if (st > lastScrollTop){
$('div').css({
opacity: function() {
var opacity = ((1 - (400 - st)/400) * 0.8);
return opacity;
}, left: st
});
} else {
$('div').css({
opacity: function() {
var opacity = ((1 - (400 - st)/400) * 0.8);
return opacity;
}, left: st
});
}
lastScrollTop = st;
});
});
</script>
</body>
</html>
嗨，愚蠢的孩子。我认为，它的价值试图在检测到滚动方向正在以50到100微秒间隔的微小间隔移动之后在指定阈值处触发动画。 – jidexl21