Nice! Though, it's just come into my mind that there's a jQuery plugin even for especially this, which seems to work even smoother: http://webdev.stephband.info/parallax.html
On Nov 23, 1:15 pm, bnlps <[EMAIL PROTECTED]> wrote: > yay -- corrected; also, added Caching and > Easing:http://pastie.org/private/pegbur0eetnzhoiqkpd5w > > thanks! > > -B > > On 22 Nov., 13:34, Balazs Endresz <[EMAIL PROTECTED]> wrote: > > > I fear it won't help much but you can try caching some values outside > > the event handler: > > var mx=$(window).width(), my=$(window).height(), $k=$('#k'); > > > Also, you set the duration in the wrong place, that should be in the > > second > > argument:http://docs.jquery.com/Effects/animate#paramsdurationeasingcallback > > And why is it 1ms? > > > On Nov 21, 8:16 pm, bnlps <[EMAIL PROTECTED]> wrote: > > > > Hi, kids -- > > > > there's a nice Flash site ... marcecko dot com ( especially, the > > > window-content-movement, mouse.x/y) > > > > ... ported to html/jQ, but couldn't find a way to realise the "smooth > > > sliding" part while moving; it's f'd, scratchy. > > > any solutions? or, a Flash-only thing? > > > > thanks! > > > -B > > > > now, have a look: > > > (tested on FF3, IE7 -- XP) > > > ----------------------------------------------------------------- > > > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > > > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> > > > > <html xmlns="http://www.w3.org/1999/xhtml"; lang="en" xml:lang="en"> > > > > <head> > > > > <title>jQx</title> > > > > <meta http-equiv="content-type" content="text/html;charset=utf-8"/> > > > > <style type="text/css" media="all"> > > > <!-- > > > html{width:100%;height:100%;overflow:hidden;} > > > body,div{margin:0;padding:0;} > > > div{position:absolute;left:0px;top:0px;width:1600px;height:1200px;} > > > span{position:absolute;} > > > --> > > > </style> > > > > <script type="text/javascript" src="http://jqueryjs.googlecode.com/ > > > files/jquery-1.2.6.min.js"></script> > > > > <script type="text/javascript"> > > > //<![CDATA[ > > > > var mx,my; > > > > $(function(){ > > > > $().mousemove(function(e){ > > > > mx=$(window).width(); > > > mx=Math.ceil((-e.pageX/mx*(16E2-mx))); > > > > my=$(window).height(); > > > my=Math.ceil((-e.pageY/my*(12E2-my))); > > > > $('#k').dequeue().animate({left:mx,top:my,duration:1}); // ! > > > > // $('#k').css({left:mx,top:my}); ... 1:1 > > > > }); > > > }); > > > > //]]> > > > </script> > > > > </head> > > > > <body> > > > > <div id="k"> > > > <span style="top:0px;left:0px;height:50px;width:50px;background- > > > color:#cff;"></span> > > > <span style="bottom:0px;left:1550px;height:50px;width:50px;background- > > > color:#e10;"></span> > > > <span style="top:0px;left:1550px;height:50px;width:50px;background- > > > color:#0cc;"></span> > > > <span style="top:1150px;left:0px;height:50px;width:50px;background- > > > color:#3fa;"></span> > > > <span style="top:50px;left:300px;height:100px;width:300px;background- > > > color:#333;"></span> > > > <span style="top:300px;left:200px;height:700px;width:150px;background- > > > color:#f6c;"></span> > > > <span style="top:500px;left:400px;height:500px;width:850px;background- > > > color:#aba;"></span> > > > <span style="top:300px;left:600px;height:100px;width:950px;background- > > > color:#ff0;"></span> > > > </div> > > > > </body> > > > > </html>
