[英]Animate scrollLeft & scrollTop on mousemove
I want to scroll the HTML page based on the mouse cursor movements, so that when moving the mouse cursor in any direction (X & Y), the scrollbars of the page move with it, scrolling the page. 我想基于鼠标光标的移动来滚动HTML页面,以便在任何方向(X和Y)上移动鼠标光标时,页面的滚动条都会随之移动,从而滚动页面。 I'd also like the scroll to have an easing, so that it has a slight delay when moving the mouse.
我还希望滚动具有缓和效果,以便在移动鼠标时稍有延迟。
I have a working prototype (without easing): https://jsfiddle.net/ssq7cda4/12/ 我有一个工作的原型(不放松): https : //jsfiddle.net/ssq7cda4/12/
$(document).mousemove(function (e) {
var winW = $(window).width(),
docW = $(this).width() - winW,
i = docW / winW, //increment value
x = (e.pageX - $(window).scrollLeft()) * i;
//$(window).scrollLeft(x);
//$("html, body").animate({scrollLeft:x}, 500, 'swing');
$("html, body").scrollLeft(x);
});
$(document).mousemove(function (e) {
var winW = $(window).height(),
docW = $(this).height() - winW,
i = docW / winW, //increment value
x = (e.pageY - $(window).scrollTop()) * i;
//$("html, body").animate({scrollTop:x}, 500, 'swing');
$(window).scrollTop(x);
});
The only problem is that I haven't found a way to add the easing to the scrolling. 唯一的问题是,我还没有找到将缓动添加到滚动中的方法。 Using .animate makes the scrolling jaggy and weird.
使用.animate会使滚动变得锯齿而奇怪。 How should I animate the scrolling with easing based on mouse move?
如何基于鼠标移动来使滚动动画化?
Does this not work for you? 这对您不起作用吗?
var win=$(window),doc=$(document); var winWidth=win.width(),winHeight=win.height(); var docWidth=doc.width()-winWidth,docHeight=doc.height()-winHeight; var increment=0,x=0,y=0; doc.on('mousemove',function(e){ increment=docWidth/winWidth; x=(e.pageX-win.scrollLeft())*increment; increment=docHeight/winHeight; y=(e.pageY-win.scrollTop())*increment; $('html,body').stop().animate({scrollLeft:x,scrollTop:y}); });
#canvas { width: 3000px; height: 2000px; background: #ededed; } .content { position: absolute; border: 3px solid pink; width: 300px; height: 300px; padding: 30px; } #island1 { top: 200px; left: 400px; } #island2 { top: 300px; left: 1700px; } #island3 { top: 700px; left: 1400px; } #island4 { top: 1200px; left: 1900px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="canvas"> <div class="content" id="island1"><p>Hello world!</p></div> <div class="content" id="island2"><p>Hello world!</p></div> <div class="content" id="island3"><p>Hello world!</p></div> <div class="content" id="island4"><p>Hello world!</p></div> </div>
Hope it helps in some way. 希望它能有所帮助。
Update: 更新:
Try this: 尝试这个:
window.requestAnimFrame = (function () { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }; })(); var win=$(window),doc=$(document),canvas=$('#canvas'); var winWidth=win.width(),winHeight=win.height(); var docWidth=doc.width()-winWidth,docHeight=doc.height()-winHeight; var increment=0,x=0,y=0,mouseX=0,mouseY=0,damping=10; requestAnimFrame(render); doc.on('mousemove',function(e){ // see [http://stackoverflow.com/a/23202637/3344111] mouseX=e.pageX*(canvas.width()-winWidth)/winWidth; mouseY=e.pageY*(canvas.height()-winHeight)/winHeight; }); function render(){ requestAnimFrame(render); // see [http://stackoverflow.com/a/4847893] & [http://stackoverflow.com/a/4315833] x+=(-mouseX-x)/damping; y+=(-mouseY-y)/damping; canvas.css({'-webkit-transform':'translate('+x+'px,'+y+'px)'}); }
#canvas { width: 3000px; height: 2000px; background: #ededed; } .content { position: absolute; border: 3px solid pink; width: 300px; height: 300px; padding: 30px; } #island1 { top: 200px; left: 400px; } #island2 { top: 300px; left: 1700px; } #island3 { top: 700px; left: 1400px; } #island4 { top: 1200px; left: 1900px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div id="canvas"> <div class="content" id="island1"><p>island1</p></div> <div class="content" id="island2"><p>island2</p></div> <div class="content" id="island3"><p>island3</p></div> <div class="content" id="island4"><p>island4</p></div> </div>
Helpful? 有帮助吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.