Jarallax key
- Type: Object
- introduction: version 0.2
- status: active
Properties
-
{progress[, ccs style, style, event]} version added: 0.1
- progress:A string which defines when/where the Jarallax key is positioned in the animation progress.
- css style:An object which defines the CSS style at the jarallax key
- style:An object containing animation styles.
- event:An object containing event event callback data.
progress
- Type: String
- introduction: version 0.1
- status: active
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
- Type: object
- introduction: version 0.2
- status: active
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:
-
- animating:Every time when Jarallax updates within the event keys.
- start:When jarallax enters the event keys (playing forward).
- rewind:When jarallax enters the event keys (playing backward).
- forward:When, within the event keys, playing forward, calls every jarallax animation update.
- reverse:Same as forward but reversed.
- complete:When Jarallax leaves the event keys (playing forward).
- rewind:When Jarallax leaves the event keys (playing backwards).
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.