stephband / jparallax

jQuery plugin for creating interactive parallax effect

Warning

This plugin is not maintained. Note that it has been possible to make parallax effects in near-pure CSS for some time, using a combination of translateZ(), perspective, and either a bit of JS for pointer tracking or a scrolling container. It is srongly suggested that you explore that avenue, as the resulting animations are optimised for the GPU, and smoother than this plugin can ever be. There is parallax scrolling page that I made based on this technique here

jquery.parallax

What does jquery.parallax do?

jquery.parallax turns nodes into absolutely positioned layers that move in response to the mouse. Depending on their dimensions, and on the options passed in, these layers move at different rates, in a parallaxy kind of way.

Demos and docs

stephen.band/jparallax/

jparallax's Issues

Mal posicionamiento de layers

Estoy implementando parallax en este sitio:
http://www.arkanmedia.com/soluciones

Donde quiero tornen los elementos en base al punto central, todo funciona bien en ocasiones, pero al recargar pareciera pierden el eje y por que ahora el punto que era quedan mas arriba todos los elementos del parallax

Ojalá pueda ayudarme

Gracias de antemano!

Jparallax 1.0 -Regressions-

Hi,

And thanks for this excellent plugin.

Plugin has been updated to Jquery 1.6.1 and had a really nice cleanup, which is a very good thing.

Though two issues came up with this version :

• Layers are stacked on the left before mouse over on the viewport. You can clearly see this behavior in the Target demo.
  With jparallax 0.99 all the layers are centered as expected before mouse over. With 1.0 layers are messy. On mouse over everything is displayed as expected.
  The "center" bouton has been removed from this demo. Is there anyway to trigger the correct layout on page load ? I know this can be tweaked with css, but it kind of reduce the power of this plugin.
• As already said here #25,
  Chrome seems to have troubles with right alignement.

Do you plan to do something about it ?

Thank you

unparallax() seems not to work

Hi,

I want to unparallax some layers when a user clicks a button.

I'm calling

jQuery('.parallax-layer').parallax({});

to init the parallax and

jQuery('.parallax-layer').unparallax(true);

to stopp the parallax. But it did nit stop. I already checked if the functions (jQuery.fn.unparallax = function(bool) and function unparallax(node, port, events) ) are called, but the second one throws an error:

Uncaught ReferenceError: elem is not defined jquery.parallax.js:415
unstyle jquery.parallax.js:415
(anonymous function) jquery.parallax.js:515
v.extend.each jquery.min.js:2
v.fn.v.each jquery.min.js:2
jQuery.fn.unparallax

Any idea?

Declaring { yparallax: false } prevents layer from reacting to mouse after 'unfreeze' event.

Border should be set for IE

Mouseport element should have "border: 0" to work properly in IE6-8. By default borderLeftWidth is "medium" in IE, resulting in "NaN" css property calculation. Documentation does not mention this.

full screen resize

Whenever I attempt to resize the browser window the images and everything resize accordingly but the distance the layers travel doesn't seem to update so it slides the images beyond the target showing my nasty background color.

http://184.71.75.30:3000/photomonkey/ (Full site; will make a demo later)

parallax not working if a layer is on top

Hi,

I have a parallax setup to work on the parallax container not the body. If I apply a layer on top of the parallax container the parallax effect stops working.

This doesn't happen when you configure the parallax on the body.

Is there a workaround for this?

Thank you

abysmal performance on ios 4.1, and samsung galaxy note?

it barely moves on my iphone 3g ios4.1 and very sluggish on my samsung galaxy note which boasts a 1ghz processor.

are you guys having the same bad performance issue?

Virtual Layer Width > Making Elements Clickable

Great plugin! I have spent a day diving into using this plugin and I am having great fun.
I understand that it is the width each element that determines how 'far', and therefor how 'fast' the layer must travel. However, setting the layers width so wide covers over all elements underneath that are to the left or right, blocking the mouse from being able to click the covered elements.

What I would like to do is be able to do it define each layers width and height to tightly bound the enclosed elements, and then assign a virtual value to define what the plugin is using as 'width'.

This would allow placing many small clickable elements on the stage, give each a virtual 'width' value to use for calculating the parallax position, while not covering over elements unless directly on-top.

Any thoughts?

bad positioning

I have also a position issue.

Every elements are styled and moved outside from the parallax viewport. everything looks like its the browser windows that is used to compute the -xx left and not the real parallax viewport ( I tried to use the option to declare it explicitly with no result)

Responsive Bug in 2.0 ?

I'm trying to achieve responsiveness on http://ur1.ca/d2l4k, using the same configuration as in the demo http://stephband.info/jparallax/demos/target.html, but upon resizing the window, the absolute position of the parallax layers shift left unproportionally if there isn't a window reload. See (Full) http://i.imgur.com/is2CCfn.jpg (Resized) http://i.imgur.com/uDsDOub.png (Reloaded) http://i.imgur.com/bjqRggJ.jpg. Browser is Chromium 25.0.1364.160-0ubuntu0.12.10.1.

Freeze layer on given position, unfreeze on counter mouse move

First, thanks for this fantastic plugin :D

Let's say that there is a layer X that moves from left to right. On position 200px from viewports left edge we want to freeze it. It will stay frozen until it would naturally go from right to left (counter direction).
For easier understanding layer would move on x-axis normally except that it would move in space form left edge of viewport until 200px from left edge of viewport.

demo for freeze and unfreeze

could you create a demo / tutorial how to use these events?

Parallax not working as it worked in 0.9 version

The earlier version of parallax was used in the 19thcb.com

But as we moved to drupal we couldn't keep the old parallax.

We have three divs with same class = '.pages' and which was rendered as expected in the above site.

But now with new parallax, I cant find the triggerExposeEdges:true option and all the layers move as merged. Can't really find options to configure the parallax to get the older options.

Here's the Drupal site

Fails silently if event.frame is missing

If the event.frame script is not included, parallax fails to work but no errors are raised an there is no indication that this is what is causing the failure.

This should be more prominent in the documentation and it should throw an error if parallax is called without the requisite script! (Would have saved me a lot of time ;) )

Worked must once mouse out of winodw.

First, Thank you. good plug in!!
(Sorry, I am poor at english.)

Very useful.

But sometimes not worked.

When web page data not complete load (loading), mouse move. -> Just not worked !!
(but worked when must once out of window, and again enter window mouse move.)

But mouse not move, while web page loading. When web page complete load and mouse move. => Just worked !!

in chrome, FF, IE.

So i add freeze code,

(function($){
$(document).ready(function(){
var $bg3 = $('#bg3'),
$bgImg =$('#bgImg'),
$bg2 = $('#bg2'),
$bg1=$('#bg1');

         $(window).resize(function(){
            $bg1.css({'left':'0px','margin':'auto'});
            $bg2.css({'left':'0px','margin':'auto'});
            $bg3.css({'left':'0px','margin':'auto'});

$('.parallax-layer').trigger('freeze'); <-------------------freeze
$('.parallax-layer').parallax({mouseport: $('html,body'),yparallax:false,xparallax:'70%',frameDuration:10}); <-------------------move
$('.parallax-layer').trigger('unfreeze'); <-------------------unfreeze
}).resize();
});
//ready
function moveBg(){
$('.parallax-layer').trigger('unfreeze');
}
window.onload = moveBg;
})(window.jQuery);

Result, chrome, FF worked. But IE is not worked.

example site : http://werty.co.kr/blog/

Firefox Issues

taken from http://forum.jquery.com/topic/jparallax-0-9-1-incompatible-with-jquery-1-4-2:

Any chance of adding this fix to the next update?

I downloaded the latest version from github and found that if I remove two instances of "console.log(b.mouseport);" from the jquery.jparallax.js and the jquery.jparallax.min.js files, the plugin will once again work in Firefox.

The "console.log" is used to print out information in Firebug, but if the browser addon is closed or doesn't exist, the script stops.

I hope that helps!

Adding and removing elements at runtime

I'm adding parallax to some elements at runtime. The first time, it works fine. But when I remove an element from the DOM, and I move my mouse outside the window and back, I'm getting this error:

Uncaught TypeError: Cannot read property 'freeze' of undefined

This is at line 391 in the jquery.parallax.js

And when I'm adding the element back to the DOM and call $(".bubbles").parallax() it doesn't work anymore (the bubbles don't move).

Is it possible to provide a destroy function that the listeners are removed when an element is removed? Or any other solution?

Is there reset possibility?

I want to reset element positions when I move mouse out of the window/element.

demos broken

http://webdev.stephband.info/jparallax/

seems all the other demos (not at the index.html) are broken too?

get there many 404s

Bad image links in demos?

Images in demos link to webdev.stephband.info instead of stephband.info

Images are 404'ing

Hey @stephband

Do you happen to have copies of the images you had here: http://webdev.stephband.info/jparallax/images/parallax_button/*.png ? The library you've written is amazing and we need to ensure that people see the great work you've done but right now I'm assuming you're upgrading your web site, which is why the examples are all borked.

Could the images be uploaded to a free image hosting service? or even just on flickr? Let me know when the old assets have been uploaded and I can land a patch for you.

Cheers,
Jaime

Declaring { xparallax: false } or { yparallax: false } means that ontarget (or rarely!) becomes true

Feature Request: Update params after initialization

I would like to be able to pass in a new xorigin, yorigin, xparallax and yparallax after a parallax has been initialized.

My specific use case is to update the yorigin so I can cause some parallax layers to fly out of the viewport and other layers to fly in (it's a rotating marquee).

I'm currently using a fade to show hide layers.

bad links?

from http://stephband.info/jparallax/

Viewing source:

<!--[if lte IE 8]><link rel="stylesheet" href="http://stephband.infocss/template.ie.css" /><![endif]-->
<!--[if IE 8]><link rel="stylesheet" href="http://stephband.infocss/template.ie8.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="http://stephband.infocss/template.ie7.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" href="http://stephband.infocss/template.ie6.css" /><![endif]-->

are you missing a / in the href's ?

Calling .parallax on the same element more than once.

Test against this.

The layer options for the second call to .parallax currently overwrite the layer options for the first, so the second call will alter how the layer responds. However, the bindings from the first call will still exist, and the layer should still respond to the mouseport defined in the first call.

Is this what we want? Don't we want to preserve the layer options from the first call? Is that even possible with the current method of getting layer options?

A voire.

Kill parallax initialiaztion

I am trying to kill and reinitialize the .parallax on window resize. Was wondering how to kill it?

active/inactive events

is there currently a way of knowing if the parallax is currently in motion or not? I would like to change an element based on if any layers are currently in motion like so:

jQuery(function() { jQuery('#parallax') .inactive(function() { var src = 'car_stop.png'; jQuery('#car').attr("src", src); }) .active(function() { var src = 'car_go.png'; jQuery('#car').attr("src", src); }); });

any help is greatly appreciated!

Worked must once mouse out of winodw.

First, Thank you. good plug in!!
(Sorry, I am poor at english.)

Very useful.

But sometimes not worked.

When web page data not complete load (loading), mouse move. -> Just not worked !!
(but worked when must once out of window, and again enter window mouse move.)

But mouse not move, while web page loading. When web page complete load and mouse move. => Just worked !!

in chrome, FF, IE.

So i add freeze code,

(function($){
$(document).ready(function(){
var $bg3 = $('#bg3'),
$bgImg =$('#bgImg'),
$bg2 = $('#bg2'),
$bg1=$('#bg1');

         $(window).resize(function(){
            $bg1.css({'left':'0px','margin':'auto'});
            $bg2.css({'left':'0px','margin':'auto'});
            $bg3.css({'left':'0px','margin':'auto'});

$('.parallax-layer').trigger('freeze'); <-------------------freeze
$('.parallax-layer').parallax({mouseport: $('html,body'),yparallax:false,xparallax:'70%',frameDuration:10}); <-------------------move
$('.parallax-layer').trigger('unfreeze'); <-------------------unfreeze
}).resize();
});
//ready
function moveBg(){
$('.parallax-layer').trigger('unfreeze');
}
window.onload = moveBg;

})(window.jQuery);

Result, chrome, FF worked. But IE is not worked.

example site : http://werty.co.kr/blog/

v1.0 with jQ 1.5.1 Problems

Two problems I'm noticing, even with your demos using the new v1.0:

1. The mouse does not trigger any events if the page loads with the mouse over the mouseport on initial load, until you move the mouse out of the port and then back in. In your previous version, the mouse would register after a moment, even if it was in the port on load.
2. The parallax images seem to be starting fully left-justified in the viewport instead of centered. When trying to accommodate this in the css, I found that the very first call to the update causes the images to jump back to that left-justified state and animate from there. Nothing I can seem to do about this without hacking your plugin.

Love the plugin, hope there's some fixes for these soon, otherwise I'll have to try another!

Re-initialising jParallax with same mouseport fails

ul id="parallax"
  li id="parallax-1"
  li id="parallax-2"

ul id="parallax2"

$('#parallax&gt;li').parallax({mouseport: $("#parallax"), yparallax:false});

This alone works perfect.

$('#parallax&gt;li').parallax({mouseport: $("#parallax2"), yparallax:false});

This also works perfect. Parallax is now controlled by two viewports simultaneously.

Now to the interesting part:

$('#parallax&gt;li').parallax({mouseport: $("#parallax"), yparallax:false});
$('#parallax').html('

');
$('#parallax>li').parallax({mouseport: $("#parallax"), yparallax:false});

This simply does not work. Replacing content of #parallax (to swap images) and
reinitializing with same mouseport fails without any errors.

$('#parallax&gt;li').parallax({mouseport: $("#parallax"), yparallax:false});
$('#parallax').html('

');
$('#parallax>li').parallax({mouseport: $("#parallax2"), yparallax:false});

But surprisingly this works for second viewport.

So the problem is that new layers inserted into the same container fail to reinitialize
with the same mouseport, but work fine with different one.

jParallax with jQuery 1.6.4 and above

Is there way to make jParallax work with jQuery above 1.6.4?

Layers are following mouse cursor in the top left corner.

Hello,

I'm not sure what I'm doing wrong but the layers on my page follow the mouse cursor in the top left corner instead of pushing them around smoothly. I used your target example as a guide and it works great locally, but once on the server, it acts funky. I should note that every once in a while after refreshing a few times the pictures will actually line up as they should, but most of the time (especially if cache is cleared) they don't line up. I also tried it on two different computers in Opera, Chrome, and Firefox with the same results. I haven't had too much experience with jQuery so I hope this isn't a silly question. I would really appreciate any help.
Thank you very much.

-Jeff

Anyway, I put together an example of the problem: http://art616.com/demos/44.html

...and here is my code (since it doesn't work pasting it in here): http://art616.com/demos/44.txt

Adding "move" event

I was looking for simple "move" event without a complete freeze, like faking a mouse move - useful for controlling parallax position by buttons or triggered events. Here is the code (insert anywhere into big query on "layers" object):

return layers
.bind("move", function(e){
var elem = jQuery(this),
local = elem.data(plugin),
mouse = local.mouse || local.freeze || global.mouse,
x = regex.percent.exec(e.x) ? parseFloat(e.x.replace(/%$/, ''))/100 : (e.x || mouse.pointer[0]) ,
y = regex.percent.exec(e.y) ? parseFloat(e.y.replace(/%$/, ''))/100 : (e.y || mouse.pointer[1]);

    // Fake the mouse
    global.mouse.ontarget = false;
    global.port.pointer=[x,y];

    // Start animating
    elem
    .bind(frameEvent, global, update);
})

Arguments are the same as for "freeze". Decay was useless for me but it could be added easily.

flickering in all browsers

using freeze and setting a target to parallax
as the transition / animation gets slower its gets more and more flickery and not very smooth =(

Freeze/Unfreeze Issues

Unfreeze doesn't work unless you set all arguments for both freeze and unfreeze

This produces the expected results, though nothing is done with the x or y arguments when unfreezing. Only the type and the decay arguments work for the unfreezing

$('.parallax-layer').trigger({type:'freeze', x: 0.9, y: 0.9, decay:0.25});
$('.parallax-layer').trigger({type:'unfreeze', x: 0.9, y: 0.9, decay:0.75});

This following examples show the error. Unfreezing is not accomplished, and the parallax effect never returns:

$('.parallax-layer').trigger({type:'freeze', x: 0.9, y: 0.9, decay:0.1});
$('.parallax-layer').trigger({type:'unfreeze'});

$('.parallax-layer').trigger({type:'freeze', x: 0.9, y: 0.9, decay:0.1});
$('.parallax-layer').trigger('unfreeze');

$('.parallax-layer').trigger({type:'freeze', x: 0.9, y: 0.9});
$('.parallax-layer').trigger({type:'unfreeze', x: 0.9, y: 0.9});

$('.parallax-layer').trigger({type:'freeze', x: 0.9, y: 0.9});
$('.parallax-layer').trigger({type:'unfreeze'});

Not Compatible with jQuery 1.9

I think that it's due to the removal of jQuery.event.handle(), but I haven't investigated thoroughly. In the mean time, you can use the jQuery Migrate plugin as a workaround.

little mistake in demos code

browsing the demos in the downloaded archive (zip) i noticed they didn't work, there is a little bug loading jquery from google:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>

this must be change like this

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>

and everything starts to move

thank for the plugin, is amazing!

Can I add this plugin to Themeforest file?

Hello, I would like to add this plugin/feature to themeforest file for sales. Am I able to do that?

Regards,

Y2ok

Chrome broken

target.html demo doesn't work in Chrome (tested chrome 10)

Chrome 21.0 - Does not initialize at the correct position.

Hey,

I am using Windows Vista, Chrome 21.0 and the target.html demo is not opening properly. When I move my cursor from top left into the parallax port, the image moves and starts from the center of the screen.

I checked using Inspect Element and found that the margin-left and margin-top values is 0. In firefox, the values keep changing.

layers tracking too far right with 1.0 on IE/webkit but not Firefox

When I upgraded my simple app to 1.0 it continues to work fine on Firefox, but on Chrome/Safari/IE all of the layers move way right. It could be that I am not following the 0.9.x > 1.x changes correctly, but it does work on Firefox.

I've put a example of it at http://expandedweb-parallax.heroku.com/.

Thanks, dave

Console.log in the code

There are two debug lines left in the code. Not a big deal, but less skilled developers might be confused.

IE performance issues

I have encountered perfromance issue with IE of all versions.

Profiling got the following results of actual time spend:
IE8:
19.35% data()
12.88% style()
11.20% trigger()
7.72% handle()

It looks like data() is awfully downperforming in IE

For comparison the FF3.6 profile:
32.82% style()
11.06% fix()
7.20% data()
5.79% eventHandle()

It looks like normal profile for heavy animation - styling and redraws eat major deal of cpu power.

it doesn't work in IE8

hi,

the jparallax effect seems to do nothing on official website. same with the demo-files in the actual master on github. other javascript on various sites works. i searched thrue the issues and tryed to find console.log commands like i've read, but i was not able to find them.

i woud be realy happy for help, becouse it's in awesome plugin! :)

with kindest regards,
chris

Demo site offline?

Why is it offline? Would like to see some examples =(

huge number of analysis error (using firefox)

In FF (3.6), thousand errors per second appears in error console (sorry, it's in french) :
"Erreur d'analyse de la valeur pour "left". Déclaration abandonée"
"Erreur d'analyse de la valeur pour "top". Déclaration abandonée"

Cannot get 1.0 to work with IE 8.0

I just downloaded the zip file, and I can get the demos and index.html to work in Chrome, FireFox, and Safari, but not IE.

The original jParallax 0.9.9 beta does work in I.E., but I was hoping to be able to use the most recent version of jQuery (1.6.1)

Any help?

Passing zero as coordinate into "freeze"

It is not possible to pass zero as x or y parameter into freeze event, despite the documentation states the [0-1] range.

I think the problem is here:
(e.x || mouse.pointer[0])

Temp solution is to pass smth like 0.005

destroy create

Hi,

I could not find a way to recreate the parallax effect by changing the images after a click event.

Basically I try to reload the parallax images on a click event and recreate the parallax effect with new images on the fly.

Maybe I'm missing something. Otherwise you could add this to your todo list :)

Thank you