This KSS effects plugin is an independent, powerful, flexible and cross-browser effects library. With this plugin you can visualize almost any effect you can think of in an easy way. But see for yourself...
Features
- Animates any source unit to any target unit
- Finally all properties are set to the transmitted value
- Animates from/to a given style class
- Changes all fixed properties after a given threshold in time
- RGBA support
- Applies all opacity rules to IE on page load
Demo
Source of currently used Kinetic Stylesheet
Run some effects...
Styles
#demostyles1
#surprise
#demostyles2
Here we have
some content.
Here we have
some content.
Slide
#slidewrapper { width: auto; height: auto; zoom: 1; overflow: hidden; }#demoslide
Scroll
This demo has been taken from http://demos111.mootools.net/Fx.Scroll
The Blue Sky
Last Grass
The Naked Tree
The Lonesome Tree
Scroll window to: fxStyles | fxSlide | fxScroll | fxTrail | Top | Bottom | Left | Right
Trail
#demotrail
Title
Some content
Download
- KSS Animation Plugin
(source |
compressed)
[2011-11-14]
The entire plugin, including FX library and Kukit plugin. - FX library
[2011-11-14]
Plain FX library, based on the animation framework FX 2.0 by Ryan Morr.
Can be used standalone as described on his website. - KSS Kukit plugin
[2011-07-21]
The plain client side kukit plugin. - Mootools syntax converter
[2010-10-07]
Converts the kss syntax of the previous Mootools plugin to the new one.
This allows you to switch to the new plugin without modifying all your kss rules.
Documentation
Settings properties
- duration
The duration of each sequence in milliseconds (default: 750)
- transition
The transition of each sequence: linear, sineIn, sineOut, sineInOut (default), quadIn, quadOut, quadInOut, cubicIn, cubicOut, cubicInOut, quartIn, quartOut, quartInOut, quintIn, quintOut, quintInOut, powIn, powOut, powInOut, expoIn, expoOut, expoInOut, circIn, circOut, circInOut, backIn, backOut, backInOut, elasticIn, elasticOut, elasticInOut, backIn, backOut, backInOut, bounceIn, bounceOut, bounceInOut
- threshold
The threshold for each sequence, when fixed style properties will be changed (between 0 and 1, default: 0.5)
- behaviour
ignore (default), abort, queue, combine
- history
Only interesting when smoothly scrolling the body (default: false)
- repeat
Will repeat the entire animation (default: 0)
- delay
The delay of starting the animation in milliseconds (default: 0)
- fps
Frames per seconds for each sequence (default: 50)
- fxSelector
Since the parameter provider methods (e.g. kssAttr, nodeAttr, etc.) do not work for -kssSelector in KSS before version 1.4, you can use -fxSelector to dynamically select a different node by id.
The statement: fx-fxSelector: kssAttr(myid);
is the same as: fx-kssSelector: htmlid(kssAttr(myid));
Style properties
Any other property will be handled as a usual style property. There are also three special properties:
- scrollLeft
Animates the horizontal scroll position; numerical value or element id
- scrollTop
Animates the vertical scroll position; numerical value or element id
- className
Animates to a given style class
Parameter provider methods
- list( arg1[, arg2[, arg3[,...]]] )
A list of arguments instead of a space separated string
- pageX( [offset] )
The current horizontal mouse position relative to the document
- pageY( [offset] )
The current vertical mouse position relative to the document
- clientX( [offset] )
The current horizontal mouse position relative to the window
- clientY( [offset] )
The current vertical mouse position relative to the window
- getStyle( element, property )
The style value of the given element
- offsetWidth( element[, offset[, factor]] )
The width of the element, including borders
- offsetHeight( element[, offset[, factor]] )
The height of the element, including borders
- offsetLeft( outer_element, inner_element[, offset] )
The horizontal offset of two elements
- offsetTop( outer_element, inner_element[, offset] )
The vertical offset of two elements
Todo
- Optimize performance
- Clean up the code and reduce its size
Limitations
- The history flag does not work for IE6 and IE7.
- Opera does not calculate the backgroundPosition correctly if initially set on a percentage basis within stylesheets. Only the first animation sequence will be affected. Workaround: First animation sequence should be set immediately (duration=0).
Can I