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