Go To Top

1. What is jQuery.isAlive?

jQuery.isAlive is a complex jQuery plugin that allows you to create advance javascript animations for your site using jQuery animation function and CSS3 transitions.
jQuery.isAlive is compatible with the all modern browsers, but also old ones, starting with IE7.
Building animations with this plugin is simple and does not require coding experience.
jQuery.isAlive works on all browser starting with IE7+,Chrome,Forefox,Opera,Safari and all mobile browsers including IE10.
jQuery.isAlive was tested with jQuery 1.4+.

2. How to install?

To install jQuery.isAlive simple include in your HEAD block this js files.
The plugin comes with some extra files(optional) that you can include in your project if you need them.

<script type="text/javascript" src="jquery.js"></script> //jQuery Library <script type="text/javascript" src="jquery.isAlive.min.js"></script> //jQuery.isAlive plugin <script type="text/javascript" src="easing.js"></script> //for animations that need easing(optional) <script type="text/javascript" src="jquery.isAlive.helper.js"></script> //for extra functions(optional)

3. Plugin setup

Initializing the plugin is very simple and is done with a single coding line:

<script type="text/javascript"> var elements = {};/*THIS IS THE ANIMATIONS OBJECT | YOU WILL LEAN HOW TO BUILD THIS OBJECT IN THE NEXT CHAPTER*/ $(document).ready(function(){ jQuery('#scroll-over-me').isAlive('create',{ elements:animations /*HERE IS WHERE YOU WILL ADD ALL THE PLUGIN OPTIONS*/ }); }); </script>

4. Plugin options

elements:

Type: Object
Default: {}
This are the elements that will create the animations. You will learn about this on Chapter 5.

elementsType:

Type: String
Default: linear
Values: linear | tree
Set this to "tree" if you want to use a tree structure when building "elements" object.(See example)

duration:

Type: Integer
Default: 1000
This is the default duration in milliseconds for any animation. This value can be overwrite by "durationTweaks" object.

durationTweaks:

Type: Object
Default: auto
With this object you can set durations for "wheel","touch","scrollbar" animations. Every one of this settings can have a "duration","durationType", and a "minStepDuration" value. If none is provided the default duration will be used.(See example)

enableWheel:

Type: Boolean
Default: true
Values: true | false
Set to false if you do not want mouse scroll events for your animations.

wheelType:

Type: String
Default: scroll
Values: scroll | jump There are two types of scrolling types. "scroll" is when the animation is runing one step after another, "jump" is when the user sets an array of "jumpPoints" and the animation si jumping from one point to another.(See example)

jumpPoints:

Type: Array
Default: []
If "wheelType" is set to "jump" then here you will enter the points that you want to use for your animations. Minimum 2 are needed.(See example)

max:

Type: Integer
Default: auto
Sets how long do you want your animation to last. If nothing is set then this value will detect this value.

min:

Type: Integer
Default: 0
Sets the minimum step that a user can go with his animation at. Only applies to "scroll"(mouse) and "drag"(touch) events.(See example)

maxScroll:

Type: Integer
Default: auto
Sets how many steps you can scroll at max in one animation.(See example)

maxDrag:

Type: Integer
Default: 0
Sets how many steps you can drag at max in one animation.(See example)

debug:

Type: Boolean
Default: False
Values: true | false
Adds a small debug tool.

easing:

Type: String
Default: linear
Values: linear | swing | easing.js functions (if easing.js is included)
Easing that will be used for jQuery and CSS3 animation. More can be added.(See example)

JSEasing:

Type: String
Default: linear
Values: linear | swing | easing.js function (if easing.js is included)
Set the type of easing you want when having a jQuery animation. This will overwrite the easing option for jQuery animations.

CSS3Easing:

Type: String
Default: linear
Values: linear | ease | ease-in | ease-out | ease-in-out | easing.js functions are also included (without easing.js)
Set the type of easing you want when having a CSS3 animation. This will overwrite the easing option for CSS3 animations.

start:

Type: Integer
Default: 0
Sets the starting value.(See example)

loop:

Type: Boolean
Default: False
Values: true | false
Enables loop animations.(See example)

preventWheel:

Type: Boolean
Default: True
Values: true | false
Prevents default action when scrolling of the site.

wheelActions:

Type: Object
Default: {up:-1,down:1}
You can define the action for each wheel move. +1 means forward and -1 means backward. 0 means no action.(See example)

stepPoints:

Type: Array
Define here the steps where you want to have a "breakpoint".(See example)

stepPointsSelector:

Type: String
The "breakpoint" jQuery selector.(See example)

stepPointsActiveClass:

Type: String
The "breakpoint" active jQuery class selector.(See example)

enableTouch:

Type: Boolean
Default: false
Values: true | false
Enables touch events.

touchType:

Type: String
Default: drag
Values: drag | wipe
There are 2 types of touch events.(See example)

touchActions:

Type: Object
Default: {up:1,down:-1,right:0,left:0}
You can define the action for each touch. +1 means forward and -1 means backward. 0 means no action.(See example)

touchXFrom:

Type: Integer
Default: 10 for "drag" / 20 for "wipe"
Number of pixels for horizontal drag/wipe to start.

touchYFrom:

Type: Integer
Default: 10 for "drag" / 20 for "wipe"
Number of pixels for vertical drag/wipe to start.

wipePoints:,

Type: Array
Define here the steps where you want to jump on each wipe(only when "touchType" is set to "wipe").(See example)

preventTouch:

Type: Boolean
Default: true
Values: true | false
Prevents default action when dragging of the site.

animateClass:

Type: String
Default: isalive-(random number)
Every animating element will get a class with this value. If none is defined a class is given.

rebuildOnResize:

Type: Boolean
Default: true
Values: true | false
Set on TRUE is you want to rebuild the page on window resize.(See example)

playPoints:

Type: Array
Define here the steps where you want to have a "playpoint". This will be used only at "play/rewind" method.(See example)

stepsOnScroll:

Type: Integer
Default: 1
The number of steps you want when having a scroll event(only when "wheelType" is on "scroll").(See example)

stepsOnDrag:

Type: Integer
Default: 1
The number of steps you want when having a drag event(only when "touchType" is on "drag").(See example)

stepsOnScrollbar:

Type: Integer
Default: 1
The number of steps you want when having a scrollbar event(only when "scrollbarType" is on "scroll").(See example)

minStepDuration:

Type: Integer
Default: 0
The milliseconds you want set as the minimum duration for each step to be animated.(See example)

initCSS:

Type: Boolean
Default: false
Values: true | false
Inits all the css value at the start.(See example)

useCSS3:

Type: Boolean
Default: false
Values: true | false
Enables CSS3 animations.(See example)

scrollbarType:

Type: String
Default: scroll
Values: scroll | jump
There are 2 types of actions on scrollbar move.(See example)

scrollbarPoints:

Type: Array
Set here the step points where you want to have a scrollbar jump point.(See example)

scrollbarActiveClass:

Type: String
jQuery class for scroll active state.(See example)

enableScrollbarTouch:

Type: Boolean
Default: false
Values: true | false
Enables touch events on scrollbar element.

wheelDelay:

Type: Integer
Default: 250
Values: number | false
Set here the number of milliseconds before a new scroll action can be taken(only when "wheelType" is on "scroll"). If set to "false" the animations will have to end before a new animation can start.(See example)

enableGPU:

Type: Bolean or String
Default: false
Values: true | false | webkit | mozilla | msie | chrome | safari | mobile | webkit&mobile | webkit!mobile
For modern browsers you can enable the use of GPU. This will make your animation run smother but may also cause some bugs. This is useful on mobile devices, but can use it on desktop too.

useIdAttribute:

Type: Boolean
Default: false
Values: true | false
If this is set to TRUE the plugin will use the "id" HTML attribute as a selector. If one is not avalaible then it will generate an ID. This is used for faster animations and prevent CSS3 bugs.

onStep:

Type: Function
This function will be called at every step of animation.(See example)

onLoadingComplete:

Type: Function
This function will be called when the animations are ready.(See example)

onRebuild:

Type: Function
This function will be called when the rebuild is performed.(See example)

5. Building animations

Once you setup your the plugin to work better with your project it's time to start creating the animations object.
Depending on the "elementsType" option, you can create a linear type object or a tree type one. In this chapter we will work with "linear" type.
Every animation from your project will be an element in this object.

1. animate

This is the most used method.
You can use this at building animations with easing, CSS3 animations or just to scroll an HTML element.

0: { "selector": > jQuery selector "method": "animate" > use "animate" if you want to do a animation "property": > CSS property | scrollTop | scrollLeft | custom function "step-start": > step where animation will start "step-end": > step where animation will end "value-start": > CSS value at start* "value-end": > CSS value at end "format": > this is used for special cases like working with CSS3 transform (optional). Uses: scale(X),rotate(Xdeg),Xpx,X%,,Xdeg,Xem "useCSS3": > true | false > force to use CSS3 or not "easing": > default easing for both jQuery and CSS3 animations (can be special easings from easings.js) "JSEasing": > easing for jQuery animations. This will be used "easing" is not provided "CSS3Easing": > easing for CSS3 animations. This will be used "easing" is not provided "use-id-attribute": > true or false - with this flag you can overwrite the "useIdAttribute" from settings "+browsers": > define a list of browsers that support this animation** "-browsers": > define a list of browsers that do not support this animation** "scrollbar": > true or false, if you want this element to act as a scrollbar. "property" setting must be "top" or "left". }

2. do (short form for animate)

By using "do" you can write less code.
This does the same thing as the "animation" but replaces "method","property","value-start","value-end" with a single line.
Ex: "do":"left(100)" | "do":"left(0,100)" | "do":"fadeOut" | "do":"fadeIn"

0: { "selector": > jQuery selector "do": > property(value-start,value-end) or property(value-end) or reserved words like "fadeOut","fadeIn" "step-start": > step where animation will start "step-end": > step where animation will end }

3. set

Using this method you can change an element CSS value,scroll value or call a function from a step.

0: { "selector": > jQuery selector "method": "set" > use "animate" if you want to change a CSS setting for an element "property": > CSS property | scrollTop | scrollLeft | custom function "step-from": > step where you want this action to be done "value-under": > CSS value at under this step* "value-above": > CSS value at above this step "format": > this is used for special cases like working with CSS3 transform (optional). Uses: scale(X),rotate(Xdeg),Xpx,X%,,Xdeg,Xem "use-id-attribute": > true or false - with this flag you can overwrite the "useIdAttribute" from settings "+browsers": > define a list of browsers that support this animation** "-browsers": > define a list of browsers that do not support this animation** }

4. animate-set

This method will set a CSS value, scroll value or call a function on every step from "value-start" to "value-end".

0: { "selector": > jQuery selector "method": "animate-set" > use "animate" if you want to do a animation "property": > CSS property | scrollTop | scrollLeft | custom function "step-start": > step where animation will start "step-end": > step where animation will end "value-start": > CSS value at start* "value-end": > CSS value at end "format": > this is used for special cases like working with CSS3 transform (optional). Uses: scale(X),rotate(Xdeg),Xpx,X%,,Xdeg,Xem "use-id-attribute": > true or false - with this flag you can overwrite the "useIdAttribute" from settings "+browsers": > define a list of browsers that support this animation** "-browsers": > define a list of browsers that do not support this animation** "move-on" : > the number of steps where the animation will occur, by defaul is 1. This means that on every step an animation will occur. }

5. static

This is not an dinamic element. Will set an CSS value, scroll or function at start and on every window resize.

0: { "selector": > jQuery selector "method": "static" > use "animate" if you want to change a CSS setting for an element "property": > CSS property | scrollTop | scrollLeft | custom function "value": > CSS value that you want to set "format": > this is used for special cases like working with CSS3 transform (optional). Uses: scale(X),rotate(Xdeg),Xpx,X%,,Xdeg,Xem "use-id-attribute": > true or false - with this flag you can overwrite the "useIdAttribute" from settings "+browsers": > define a list of browsers that support this animation** "-browsers": > define a list of browsers that do not support this animation** }

6. set@start

Will set a CSS value at the starting point of your animation. This works only if "initCSS" is set to FALSE.

0: { "selector": > jQuery selector "method": "set@start" > use "animate" if you want to change a CSS setting for an element "property": > CSS property | scrollTop | scrollLeft | custom function "value": > CSS value that you want to set "format": > this is used for special cases like working with CSS3 transform (optional). Uses: scale(X),rotate(Xdeg),Xpx,X%,,Xdeg,Xem "use-id-attribute": > true or false - with this flag you can overwrite the "useIdAttribute" from settings "+browsers": > define a list of browsers that support this animation** "-browsers": > define a list of browsers that do not support this animation** }

7. add-class

Will add a class to the element at a given step.

0: { "selector": > jQuery selector "method": "add-class" > use "add-class" if you want to add a class to an element "step-from": > step where the class will be added "class-name": > the name of the class "use-id-attribute": > true or false - with this flag you can overwrite the "useIdAttribute" from settings "+browsers": > define a list of browsers that support this animation** "-browsers": > define a list of browsers that do not support this animation** }

8. remove-class

Will remove a class from the element at a given step.

0: { "selector": > jQuery selector "method": "remove-class" > use "remove-class" if you want to remove a class from an element "step-from": > step where the class will be removed "class-name": > the name of the class "use-id-attribute": > true or false - with this flag you can overwrite the "useIdAttribute" from settings "+browsers": > define a list of browsers that support this animation** "-browsers": > define a list of browsers that do not support this animation** }

* In not added this value is autodetected by the plugin
** The browsers values can be: webkit|chrome|safari|mozilla|opera|konqueror|mobile|msie|msie7-|msie7|msie8|msie9|msie10|msie11|msie11+|unknown. But you can also use it like this: webkit+mobile(webkit mobile browsers) or webkit!mobile(non-mobile webkit browsers)

6. Events

jQuery.isAlive has 3 events that you can use.

1. onStep(position,loop,animationType)

This event is called on every step of your animation

jQuery('#scroll-over-me').isAlive('create',{ elements:animations, onStep:function(position,loop,animationType){ // position: the position that your animation reached // loop: the loop value(if your animation can has loops) // animationType: the type of animation that is used when the function is called. Ca be: "init","skip","goTo","scroll","jump","wipe","drag","scrollbar","play","rewind","autoplay","toggle" } });

2. onLoadingComplete()

This event is called after the initialization procedure is done and the plugin is ready to be used

jQuery('#scroll-over-me').isAlive('create',{ elements:animations, onLoadingComplete:function(selector){ // selector: the selector used to bind jQuery.isAlive } });

1. onRebuild(params,position,loop)

This event is called on a rebuild action (resize of the browser)

jQuery('#scroll-over-me').isAlive('create',{ elements:animations, onRebuild:function(params,position,loop){ // params: the left/top/width/height of your element, window and document // position: the position that your animation reached // loop: the loop value(if your animation can has loops) } });

7. Methods

jQuery.isAlive has some helpfull methods that will enable you to interact with your animations very easy.

1. create

Initializing the jQuery.isAlive plugin

jQuery('#scroll-over-me').isAlive('create',settings); // where settings is the setting object mentioned on Chapter 3.

2. goTo

Plays animation to the given step

jQuery('#scroll-over-me').isAlive('goTo',{ to: > step where you want to go duration: > duration, if nothing is provided the default will be used durationType: > can be "default" or "step", where the duration will be the numbers of steps multiply by duration given orientation: > can be "default" or if your animation has a loop you can enter "next","prev","loop" minStepDuration: > the minimum duration per step force: > will force the animation to play until the end onComplete(): > this is a function that will be called on the animation end });

3. skip

Skips the animation to the given step

jQuery('#scroll-over-me').isAlive('skip',{ to: > step where you want to skip });

4. play

Plays animation to the next "play point"

jQuery('#scroll-over-me').isAlive('play',{ duration: > duration, if nothing is provided the default will be used durationType: > can be "default" or "step", where the duration will be the numbers of steps multiply by duration given minStepDuration: > the minimum duration per step force: > will force the animation to play until the end onComplete(): > this is a function that will be called on the animation end });

5. rewind

Plays animation to the previous "playpoint"

jQuery('#scroll-over-me').isAlive('play',{ duration: > duration, if nothing is provided the default will be used durationType: > can be "default" or "step", where the duration will be the numbers of steps multiply by duration given minStepDuration: > the minimum duration per step force: > will force the animation to play until the end onComplete(): > this is a function that will be called on the animation end });

6. autoplay

Plays the animations in loop

jQuery('#scroll-over-me').isAlive('autoplay',{ duration: > duration, if nothing is provided the default will be used durationType: > can be "default" or "step", where the duration will be the numbers of steps multiply by duration given orientation: > can be "next" or "prev" minStepDuration: > the minimum duration per step force: > will force the animation to play until the end count: > how many times will the animation play. Default is set to FALSE for infinite loop onLoop(count): > this function will be called on every new loop started. "count" will return the loop count });

7. toggle

Plays animation forward/backward.

jQuery('#scroll-over-me').isAlive('toggle',{ duration: > duration, if nothing is provided the default will be used durationType: > can be "default" or "step", where the duration will be the numbers of steps multiply by duration given minStepDuration: > the minimum duration per step force: > will force the animation to play until the end onComplete(): > this is a function that will be called on the animation end });

8. stop

Stops the animation

jQuery('#scroll-over-me').isAlive('stop');

9. rebuild

Rebuilds the layout.

jQuery('#scroll-over-me').isAlive('rebuild');

10. enableWheel

Enables or disables scroll events.

jQuery('#scroll-over-me').isAlive('enableWheel',true); //to enable jQuery('#scroll-over-me').isAlive('enableWheel',false); //to disable

11. enableTouch

Enables or disables touch events.

jQuery('#scroll-over-me').isAlive('enableTouch',true); //to enable jQuery('#scroll-over-me').isAlive('enableTouch',false); //to disable

12. addOnComplete

Adds a function that will be called when the animation in progress will end.

jQuery('#scroll-over-me').isAlive('addOnComplete',myFunction);

13. getCurrentPosition

Returns the current step position of your animation

jQuery('#scroll-over-me').isAlive('getStepPosition');

14. getStepPosition

Returns the end step position of your animation

jQuery('#scroll-over-me').isAlive('getStepPosition');

15. getMaxStep

Returns the last step of your animation

jQuery('#scroll-over-me').isAlive('getStepPosition');

16. getAnimationState

Returns true if animation is playing at the time.

jQuery('#scroll-over-me').isAlive('getAnimationState');

17. destroy

Destroys an instance

jQuery('#scroll-over-me').isAlive('destroy');

18. destroyAll

Destroys all instances and removes all general events(resize) and styles

jQuery().isAlive('destroyAll');

19. getBrowser

Returns your browser informations, like engine, version, if touch was found and if mobile or not

jQuery().isAlive('getBrowser');

20. getVersion

Returns your jQuery.isAlive current version

jQuery().isAlive('getVersion');

8. CSS classes

jQuery.isAlive adds to HEAD element some CSS classes that can be used by the user.

1. isalive-nouserselect

Disables select on modern browsers. Add this to your master element if you want to prevent text selection on touch devices.

HTML: <div class="isalive-nouserselect"></div> jQuery: jQuery('#scroll-over-me').addClass('isalive-nouserselect');

2. isalive-notouchaction

Disables touch actions(like drag) on MSIE 10+.

HTML: <div class="isalive-notouchaction"></div> jQuery: jQuery('#scroll-over-me').addClass('isalive-notouchaction');

3. isalive-enablegpu

Adds style properties that enables the use of GPU accelerated animations.

HTML: <div class="isalive-enablegpu"></div> jQuery: jQuery('#scroll-over-me').addClass('isalive-enablegpu');

9. Known problems

1. On mobile devices the layout will break when the keyboard is open.

Fix: Add in the HEAD block of your HTML this "meta" tag.

<meta name="viewport" content="user-scalable=no"/>

2. On Internet Explorer the mouse scroll event does not work.

Fix: This happens when the wrapper used for mouse scroll events does not have a background property set. Add this code in your CSS.

#my-wrapper{ background-image: url("about:blank"); }

10. Examples

Simple animation example Demo for basic uses of "animate","animate-set","set","add-class","remove-class".

Movie effect Get a movie like effect by scrolling a div.

Butterfly effect A script randomly cuts a image into pieces and animate them.

360 degree panorama A 360 degree panorama controled by a scrollbar.

11. Sites that use jQuery.isAlive

http://www.reea.net http://www.reea.net/reeanimation