Cut & Paste Animated UL lists
|
Description: This jQuery script adds flare to your UL lists, by animating the items into view, one item at a time. You can get each item to slide in from the left, drop in, or even spin before making their way to their destination. It harnesses the power of CSS3 transitions to do its bidding, by animating any defined CSS properties before and after values.
The script lets you choose from 3 display modes- immediately animate the UL list(s) when the page loads, after x seconds, or only when the UL becomes visible on the screen. The default setting is the last one, ensuring the user will always witness your UL lists making their appearance in style!
This script works in all CSS3 capable browsers (IE10+, FF, Chrome etc), and simply does nothing with the UL list for the rest. Cool!
Examples (CSS3 capable browser required to see animation):
- Preloading images and executing code only after all images have loaded
- Setting CSS3 properties using JavaScript
- Going beyond cookies- Using DOM sessionStorage and localStorage to persist larger amounts of info
- Using document.createElement() to test for browser support for an element
- The onmousewheel event of JavaScript
- Handling runtime errors in JavaScript using try/catch/finally
- Dynamically loading an external JavaScript or CSS file
Directions:
Step 1: Add the following code to the <HEAD> section of your page:
Download jquery.animatedlists.js (right click and select "Save As"), the external file referenced by the above code.
Step 2: Add the below sample HTML markup to your <BODY>:
More Information
To animate a UL into view, call the jQuery function
animatelist() on the UL in question:
$('ul.demo1').animatelist({pause: 1, postclass: 'demo1-after'})
where "ul.demo" should be replaced with a valid jQuery selector that references the desired UL, and the parameter that it accepts a blank object {} containing a list of options for this animation:
| option | Description |
|---|---|
| duration defaults to 0.5 |
The duration of the transition effect, in seconds. |
| pause defaults to 0.5 |
The pause between transition of each LI item, in seconds. |
| delaybeforestart defaults to "onvisible" |
The delay after the page loads before
the transition on the UL items begins. By default, it only starts
when the UL is scrolled into view (or is already in view by
default), with a value of "onvisible". Set it to an
integer (ie: 1) instead to set the pause in seconds, such as 1
second after the page loads (regardless of whether the UL is in
view). |
| postclass defaults to "nimated-after" |
The name of the CSS class that should be added to the UL element when the transition is completed. The properties defined in this CSS class are what the script will animate to (their values that is) from the original. |
Lets say you want your UL items to fly in diagonally from the left edge of the UL container. You would first set the default "top" and "left" CSS properties to a negative value (so each LI element is positioned diagonally and off screen), then define a "post" CSS class that resets these two properties to their final resting positions, or 0 and 0, respectively:
<!doctype html>
<style>
ul.resources li{ /* default CSS for ul.resources li */
left: -500px;
top: -200px;
}
ul.resources-after li{ /* CSS class for ul.resources li that script will animate to */
left: 0;
top: 0;
}
</style>
<script>
jQuery(function($){ //on document.ready
$('ul.resources').animatelist({postclass: 'resources-after'})
</script>
<body>
<ul class="resources">
<li><a href="http://www.javascriptkit.com/">JavaScript Kit- Your one stop JavaScript resource!</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive DHTML and CSS codes</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive CSS Gallery and examples</a></li>
<li><a href="http://www.freewarejava.com">Freewarejava Java Directory</a></li>
<li><a href="http://www.ddwhois.com">DD Whois Ajax Whois Tool</a></li>
</ul>
</body>
Demo:
- JavaScript Kit- Your one stop JavaScript resource!
- Dynamic Drive DHTML and CSS codes
- CSS Drive CSS Gallery and examples
- Freewarejava Java Directory
- DD Whois Ajax Whois Tool
You can animate virtually any CSS property. Just define each properties' default values first, then inside the "post" CSS class, their final values for the CSS to transition to and from.