Jarallax key

Properties

progress

This property defines when/where a css style or event is. Styles can be defined in percentages or numbers. 0% stands for the beginning of the animation, 100% is the end. When numbers are used (without the percentage) Jarallax automatically calculates the end point. The highest progress number will be the end of the animation. These calculations are updated every Jarallax update.

For example:

code example

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

Will do the same as:

code example

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

but not:

code example

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

The first and second example will have the same effect. In the third example you add a progress which is higher than the previous one. This makes a progress of 15 the highest value and a percentage of 100%. progress 10 drops to a lower percentage (10 / 15 = 66.6%).

css style

This defines the CSS style at the jarallax key. All CSS properties are typed at the object level of the jarallax key. These properties are based on jQuery CSS method. If a CSS style isn't defined in the second key but is in the first key, then jarallax sees the first CSS style as a non animated style. A non animated style won’t be animated and stays at his starting value.

http://api.jquery.com/css/

example

{progress:'0', 
 marginLeft:'10px',
 display:'block',
 top:'100px',
 opacity:'0.5'}
      

style

event

Event refers to functions you can trigger when certain jarallax events are occurring. Events only have effect between the current and next Jarallax key. These are also called the event keys.

Possible events where you can select from are:

example

hideText = function() {
  $('p').css('display', 'none');
}

jarallax = new Jarallax();
jarallax.addAnimation('p',{progress:'0%',opacity:'1',event:{complete:hideText}},
                          {progress:'50%', opacity:'0'});
      

In this example all the paragraphs hide when you scroll down to 50%. after 50% progress the 'hideText' function get activated. This function sets the display property of all th paragraphs to none.

Comments