[英]jQuery - animate on scroll up and down with easing effect?
I want to animate an element when I scroll down and up the page: 当我上下滚动页面时,我想为元素设置动画:
$(document).ready(function(){ $(window).scroll(function(){ $('p').each(function(r){ var scrolled = $(window).scrollTop(); $(this).css('top', (scrolled * 2.5) + 'px'); }); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <p style="position:relative">This is a paragraph.</p> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/>
But I want to add the easing effect on top of it. 但我想在此之上添加放松效果。 CSS method does not seem to do that so I tried with animate method:
CSS方法似乎没有做到这一点,所以我尝试了animate方法:
$(document).ready(function(){ $(window).scroll(function(){ $('p').each(function(r){ var scrolled = $(window).scrollTop(); $(this).animate({top: (scrolled * 10.5) + 'px'}, 600, 'easeOutExpo', function () { // }) }); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <p style="position:relative">This is a paragraph.</p> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/>
But it seems to be on the infinite animate loop when I just scroll the page slightly. 但是,当我稍微滚动页面时,它似乎处于无限动画循环中。
Any ideas? 有任何想法吗?
One way to help would be to use mod, %
, operator condition so that you are not animating every scroll movement. 一种帮助方法是使用mod,
%
,运算符条件,以免使每个滚动动作都没有动画效果。
https://jsfiddle.net/Twisty/Lq73wkpm/2/ https://jsfiddle.net/Twisty/Lq73wkpm/2/
JavaScript 的JavaScript
$(function() {
$(window).scroll(function() {
$('p').each(function(r) {
var scrolled = $(window).scrollTop();
console.log("Scroll Top: " + scrolled);
if (scrolled % 10 == 0) {
console.log("Animate: " + scrolled);
$(this).animate({
top: scrolled + 'px'
},
600,
'easeOutExpo',
function() {
//
});
}
});
});
});
It's still a little clunky. 还是有点笨拙。
Your other option is to check for the user to no longer scroll, and jump to that location in the screen: jQuery scroll() detect when user stops scrolling 您的另一个选择是检查用户不再滚动,然后跳到屏幕上的该位置: jQuery scroll()检测用户何时停止滚动
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.