Jarallax

version: 0.2.2

New features:

Jump to progress

the Jarallax.jumpToProgress method allows the user to animate the Jarallax animation to a position in the animation. This is a very handy method for navigation. To see it in action press one of the navigation buttons on top of the page.

Example
jarallax.jumpToProgress( 20, 2000, 30);

In this example Jarallax animates to position 20 over 2000 milliseconds with 24 frames a second. A lower frame rate will increase preformance but lower the amount of updates.

Smooth scrollbar

Some browsers smooth out the scrollbar when it is moved (like safari). This makes the Jarallax animations play more smoothly when the scroll bar is moved. Most browsers don't smooth out the scrollbar, this is visible when the down arrow is pressed. Enabling the smoothed scrollbar will animate the current progress of the Jarallax animation to the scrollbar position. This prevents animation jumping and animates the website even with small steps. This feature does require more updates which makes it more CPU heavy.

Enabling the smoothed scrollbar will animate the current progress of the Jarallax animation to the scrollbar position. This prevents animation jumping and animates the website even with small steps. This feature does require more updates which makes it more CPU heavy.

Example:
var jarallax = new Jarallax(new ControllerScroll(true));

Clone animations

In earlier versions of Jarallax every animation needs to be defined. With cloneAnimation existing animations can be cloned and slightly adjusted. With this feature many animations can be created and adjusted with less efford.

Example
var jarallax = new Jarallax();
var animation = jarallax.addAnimation('#slide1',[{progress:'0', opacity:'0', top:'100%'},
                                                 {progress:'10', opacity:'1', top:'40%'},
                                                 {progress:'20', opacity:'0', top:'0%'}]);
                        
jarallax.cloneAnimation('#slide2',{progress:'+10'}, animation);
jarallax.cloneAnimation('#slide3',{progress:'+20'}, animation);
jarallax.cloneAnimation('#slide4',{progress:'+30'}, animation);

When defining an animation with the addAnimation method, an animation sequence is returned. This sequence can be cloned and adjusted with the cloneAnimation method.

The first argument expects a selector, the second an object or array with the key modifications. The third argument is the original animation sequence which you want to clone.