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!
Directions:
Step 1: Add the following code to the <HEAD> section of your page:
<!doctype html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style>
ul.demo1 li{ /* initial CSS for demo 1 (before it's animated) */
opacity: 0; /* animate opacity into view */
left: -100%; /* animate left property into view */
}
ul.demo1-after li{ /* Post CSS for demo 1 (after it's animated). "demo1-after" dynamically added to UL */
opacity: 1;
left: 0;
}
ul.gallery{ /* initial CSS for .gallery */
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
ul.gallery li{ /* initial CSS for .gallery (before it's animated) */
float: left;
width: 190px;
height: 105px;
left: -120%; /* animate left property into view */
opacity: 0;
-moz-transform: rotate(180deg) scale(2); /* animate CSS3 transform into view */
-ms-transform: rotate(180deg) scale(2);
-o-transform: rotate(180deg) scale(2);
-webkit-transform: rotate(180deg) scale(2);
transform: rotate(180deg) scale(2)
}
ul.gallery-after li{ /* Post CSS for .gallery (after it's animated). "gallery-after" dynamically added to UL */
left: 0;
opacity: 1;
-moz-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1)
}
</style>
<!--[if lte IE 9]>
<style>
/* In IE9 or less, ensure UL is always visible */
ul li{
left: 0 !important;
top: 0 !important;
opacity: 1 !important;
}
</style>
<![endif]-->
<script src="jquery.animatedlists.js">
</script>
<script>
jQuery(function($){ // on DOM load
$('ul.demo1').animatelist({pause: 1, postclass: 'demo1-after'})
$('ul.gallery').animatelist({duration: 0.7, postclass: 'gallery-after'})
})
</script>
Download http://www.javascriptkit.com/script/script2/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>:
<ul class="demo1">
<li><a href="http://www.javascriptkit.com/javatutors/preloadimagesplus.shtml">Preloading images and executing code only after all images have loaded</a></li>
<li><a href="http://www.javascriptkit.com/javatutors/setcss3properties.shtml">Setting CSS3 properties using JavaScript</a></li>
<li><a href="http://www.javascriptkit.com/javatutors/domstorage.shtml">Going beyond cookies- Using DOM sessionStorage and localStorage to persist larger amounts of info</a></li>
<li><a href="http://www.javascriptkit.com/javatutors/createelementcheck.shtml">Using document.createElement() to test for browser support for an element</a></li>
<li><a href="http://www.javascriptkit.com/javatutors/onmousewheel.shtml">The onmousewheel event of JavaScript</a></li>
<li><a href="http://www.javascriptkit.com/javatutors/trycatch.shtml">Handling runtime errors in JavaScript using try/catch/finally</a></li>
<li><a href="http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml">Dynamically loading an external JavaScript or CSS file</a></li>
</ul>
<ul class="gallery">
<li><img src="fusion.jpg" /></li>
<li><img src="fusion2.jpg" /></li>
<li><img src="fusion3.jpg" /></li>
<li><img src="fusion4.jpg" /></li>
<li><img src="fusion5.jpg" /></li>
<li><img src="fusion6.jpg" /></li>
<li><img src="fusion7.jpg" /></li>
<li><img src="fusion8.jpg" /></li>
</ul>
