jQuery Parallax 0.2 – Minor updates
So I’ve updated the parallax script a little. It’s called in a more jQuery like manner now and has a couple of useful options for inverting the movement and changing the unit of measurement to any jQuery/CSS supported unit.
Example code:
$('div.parallax').parallax({ 'elements': [ { 'selector': 'body', 'properties': { 'x': { 'background-position-x': { 'initial': 0, 'multiplier': 0.1, 'invert': true } } } }, { 'selector': 'div.outer', 'properties': { 'x': { 'background-position-x': { 'initial': 50, 'multiplier': 0.02, 'unit': '%' } } } }, { 'selector': 'div.inner', 'properties': { 'x': { 'background-position-x': { 'initial': 0, 'multiplier': 0.3 } } } } ] });
You can see a demo of the updated script, or just download the package (includes jQuery 1.3.2).
10 Comments
→
I’ve had to make a minor change to your code in order to make untouched y and x axis remain untouched… probably not the best way but here’s what I did:
var coords = $(options.elements[i].selector).css('backgroundPosition').split(' '); opts['background-position'] = '' + (('background-position-x' in opts) ? opts['background-position-x'] : coords[0]) + ' ' + (('background-position-y' in opts) ? opts['background-position-y'] : coords[1]);around the “fix for firefox”
That looks like a pretty robust solution… Was that for a particular browser? I do most of my testing in WebKit so I do tend to neglect the others on occasion…
Hi dom
Thanks for this plugin, it’s really efficient !
I’ve just one sugges:
Change the :
” $((options.useHTML) ? ‘html’ : this).mousemove(function(e) { ”
by :
” $((options.useHTML) ? ‘html’ : this).bind(‘mousemove’,(function(e) { ”
With the bind event we have an easy way to stop the parallax effect by using unbind()
This can be usefull in certain case
thanks again for this plug !
Hi Colir,
That’s not a bad improvement! If I make a future version, I’ll be sure to append the function like this. The .mousemove() and .click() handlers are nice and easy to set up the prototype, so it’s mainly laziness that means I haven’t changed it
Thanks!
Dom
Thanks for this script. It works great and has to be my favorite parallax plugin out there.
Hi Meririm,
Thanks for commenting! I think your header looks great! I’m glad you found it useful!
Thanks for linking to me too!
Dom
Thanks for this great jquery script.
Nice work mate. I’m going to share it on my jQuery blog: http://jquery4u.com.