7 javascript css jquery css-animations
我想制作类似于那些向下滚动的网站,然后滚动一些动画,如果你向上滚动就会反转.
我看到像一些图书馆这样,但我想看看能不能做了一些更简单的方法？
谢谢
$(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>转换解决方案(无关键帧)
<!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>它可以更简单地完成，并且无需 jQuery。这是一个粗略的做法，但我通过添加一个容器并传递比率来使其更加通用，以获得大部分完整的、有界的从左到右的位置和零到一的不透明度过渡：
var locked = false;
var container = document.getElementById('container');
var animated = document.getElementById('animated');
window.addEventListener('scroll', function() {
if (!locked) {
window.requestAnimationFrame(function() {
animated.style.opacity = Math.min(window.scrollY / window.innerHeight, 1);
animated.style.left = Math.min(animated.style.opacity * container.clientWidth, container.clientWidth - animated.clientWidth).toString() + 'px';
locked = false;
});
}
locked = true;
});#container {
border: 1px solid red;
height: 200vh;
width: 80%;
}
#animated {
width: 100px;
height: 100px;
position: fixed;
opacity: 0;
background: rgb(0, 0, 0);
}<div id="container">
<div id="animated"></div>
</div>