#animated css

Noo Capulus – A Multi Purposes Coffee Style Theme

Features

100% Responsive & Retina ready

Compatible with Joomla 3.x

Awesome Joomla extensions built-in

Animate CSS integrated

Built with Bootstrap, HTML5 & CSS3

Gentle & peaceful theme colours

Revolution slider integrated (worth $25)

Fully integrated with social network (FB, Twitter, G+…) and location finder plugin

Slick & Professional Layout

Creatively designed Menu page

Fully equipped feature…

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'); );