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).
Edit: I’ve added a post with a couple of working examples here.
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.
Nice work. I’m getting start now with JQ and JS. And this was simple and efficient. Just wonderind how to animate those layers in up/down directions too. Is that possible? I saw other good examples, but those ones witch got all directions movements just bring some issues in IE-7/8/9.
Thanks you and Damn you “IE”.
Hi there!
Vertical animation should totally be possible using the y parameter, I didn’t notice any issues in my tests, but I only needed minor movement vertically (just to show it reacted to vertical movements). I’ll try and run some more tests and update the script if I notice any issues.
Thanks for commenting!
Hey there. I’m using this plugin for a thing I’m making, but I need to “unload” the parallax effect. Is there any way I can do this? $(this).unbind(‘mousemove’) isn’t working for some reason.
Hi there,
Thanks for your comment! I’m not sure why unbind wouldn’t work, perhaps if I bound the events instead of using .mousemove() but I’d have thought you could unbind at the same time. I hope you found a way around the problem though!
Thanks!
i shared this link a lot 🙂
great job!
Thanks Martin!