Jarallax

Methods

Constants

Methods

setProgress

SetProgress adjusts the current position of the Jarallax animation. After setting the progress of the Jarallax instance Jarallax will automatically update all the animations.

implementation

var jarallax = new Jarallax();
jarallax.addAnimation('div',[{progress:'0%',marginLeft:'0px'},
                             {progress:'100%', marginLeft:'100px'}]);
jarallax.setProgress(0.5);

This example sets all the ‘div’ elements left margin to 50px. This is because the Jarallax progress is moved to the halfway position. The animation which is added causes the ‘div’ elements to adjust the left margin from 0px to 100px. This is 50px halfway trough.

Back to Top

setDefault

setDefault is activated every jarallax update. It's commonly used for default values when objects aren’t animated. In some cases animations don’t get completed because of gaps in progress jumping. A good example where setDefault is handy is fading texts in and out. Because of progress jumping texts never get completely faded out.

implementation

var jarallax = new Jarallax();
jarallax.setDefault('p', {opacity:'0'});
jarallax.addAnimation('p', [{progress:'20%', opacity:'0'},
                            {progress:'40%', opacity:'1'},
                            {progress:'60%', opacity:'1'},
                            {progress:'80%', opacity:'0'}]);

This example fades all paragraphs in and out. Usually after 80% of the animation the paragraphs animations won't get updated. So when an animation jumps from 60% to 85% all paragraphs are still fully visible. At the second line we add a setDefault so that all paragraphs by default are set to 0 opacity. The paragraphs don’t get updated at 85%, this doesn’t matter because all the paragraphs’ opacity are set to 0 by default. This prevents animation ghosting.

Back to Top

addAnimation

Adding animations is the very core of Jarallax, no animations can be created without. When Jarallax is updated all the animations you have added with this method will be updated, which means all selectors will respond to the jarallaxKeys

implementation A

var jarallax = new Jarallax()
jarallax.addAnimation('p', [{progress:'0%', opacity:'0'},
                            {progress:'100%', opacity:'1'}]);

This example does fade all the paragraphs in. The paragraphs are selected with the string 'p' as the first argument. The animations contains 2 jarallax keys. The first key sets the opacity to 0 at the start of the animation (0% progress). The second key sets the opacity to 1 at the end of the animation (100% progress).

implementation B

var jarallax = new Jarallax()
jarallax.addAnimation('p', [{progress:'0%', opacity:'0'},
                             {progress:'100%', opacity:'1'}], 
                      ['webkit', 'iDevice'], true);

This example also fades in all the paragraphs. The big difference compared to example A is that example B only works on iDevices which use a webkit browser. This excludes all non apple devices and iDevices with Firefox.

Possible platforms are:

jumpToProgress

the Jarallax.jumpToProgress method allow the user to animate the Jarallax animation to a position in the animation. This is a verry handy method for navigation.

implementation

<a href="#" onClick="jarallax.jumpToProgress(0, 2000, 30);">
  Intro
</a>
<a href="#" onClick="jarallax.jumpToProgress(10, 2000, 30);">
  New features
</a>
<a href="#" onClick="jarallax.jumpToProgress(20, 2000, 30);">
  Jump to progress
</a>

In this implementation 3 buttons are created with anchor tags. "onClick" activates the jumpToProgress method. jumpToProgress prevents default actions and animates Jarallax to its new position.

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

Back to Top

cloneAnimation

When creating a Jarallax heavy website with a lot of repeated animations, your code could get messy. Also minor adjustments can be really tedious and time consuming. The cloneAnimation method reuses previously created animations and adjusts them slightly for future use. cloneAnimations can adjust all the Jarallax keys with 1 command or adjust every key individually.

implementation A

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 calling the addAnimation method, an Array of Jarallax animation objects get returned. These objects can be used in the cloneAnimation method. The first argument is its new selector, the second argument are its modifications. In this example all Jarallax keys get an additional progress of 10, 20 and 30. You can also use other mathematical operators. Supported operators are + (plus), - (minus), * (multiply) and / (divide). The last argument expects an Array containing Jarallax animation objects.

implementation B

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'}, {progress:'+30'}, {progress:'+100'}],
                        animation);
      

It's possible to adjust every Jarallax key, This required an Array of blind keys with additional mathematical operators. This example duplicates the animation setting the first key at progress 10, the second key at position 40 and the third key at position 120. It's possible to adjust all the css properties if they are set in the original animation.

Back to Top

Constants

EASING

The EASING constant is usualy used to ease animations. To apply easing to animations add a style property to your Jarallax key eith a easing value and an optional power value.

implementation

var jarallax = new Jarallax();
jarallax.addAnimation('#white',
    [{opacity:'0', progress:'0', top:'100%'}, 
     {progress:'400', top:'100%', opacity:'0', style:{easing:'easeOut',power:3}}, 
     {progress:'500', top:'0%', opacity:'1'}]);

Back to Top

Comments