stephband / jparallax

jQuery plugin for creating interactive parallax effect
http://stephen.band/jparallax/
1.15k stars 334 forks source link

Adding "move" event #4

Open ghost opened 14 years ago

ghost commented 14 years ago

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.

stephband commented 14 years ago

Ok.

My approach to this problem was to freeze and then unfreeze on mouseenter:

jQuery('.parallax-layer') .trigger({type: 'freeze', x: 2, y: 2});

jQuery('.parallax-mouseport') .bind('mouseenter', function(e){ jQuery('.parallax-layer').trigger('unfreeze'); });

However, I can see how a 'move' event would be a lot more concise. I think that can go in ...

Cheers!

stephband commented 14 years ago

Note the code above suffers from Issue 5 - 0 values will not work.

ghost commented 14 years ago

"Move" does not work in IE, it behave quirky. Only one animation step happens on move() call, so it takes multiple calls to actually move layers to final destination. Only IE's are affected, will investigate.