Categories:

Home / Free JavaScripts / Content Management scripts / Here

Cut & Paste Animated UL lists

Credit: JavaScript Kit

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):

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:

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.


JavaScript Tools:
Site Info

CopyRight 1998-2014 JavaScript Kit. NO PART may be reproduced without author's permission.