New Post has been published on Html Use
New Post has been published on http://www.htmluse.com/animated-css-boxes/
Animated CSS Boxes
Download Demo
Animated css boxes are extremely user friendly and can be used for multiple purposes, for example notifications, beauty and general use. Free icons from Font Awesome has been used along with jQuery. There are six different animations used with great care in order to maintain awesome interface.
1. INCLUDE CSS AND JS FILES
<link href="css/font-awesome.min.css" rel="stylesheet" media="all" /> <link href="css/boxes.css" rel="stylesheet" media="all" /> <script src="js/jquery-1.11.0.min.js"></script>
In order to work properly, a file boxes.css must be included. Now user has choice to add one of the following classes on hover, click or any other event. These are bounce, rubberBand, swing, rotateInDownLeft, zoomIn and fadeInLeft.
2. HTML
<div id="one"> <div id="icon"><center><i class="fa fa-openid fa-2x"></i</center></div> <div id="written"<center>Demo text</center></div> </div>
3. JAVASCRIPT
$(function() $("#one").addClass('animated bounce'); );
Changing the class “bounce” to any of other mentioned class will change animation style.