Mad twitter is a highly user friendly button, that produces different animations on hover effect. Six different effects makes the twitter angry and it goes wild, which is the most interesting feature of mad twitter button.
How to use
Mad twitter is an easy to use jquery plugin. A css file must be included to make it work properly.
<link href="css/mad_twitter.css" rel="stylesheet" media="all" />Any latest version of jquery works perfectly, it can be added easily.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> A separate js file is added with the demo content in case if user don’t want to make hands dirty with code. The file mad_twitter.js will work perfectly.
HTML
<div class="mad_twitter" id="mad_twitter_1"> <ul> <li id="written">Follow us</li> <li id="twitter"><center><i class="fa fa-twitter fa-2x"></center></i></li> </ul> </div>Script
$("#mad_twitter_1").hover(function() $("#mad_twitter_1 .fa-twitter").toggleClass("magictime foolishIn"); ); Change Animation
There are six unique animations and can be chaged as follows;
Insead of using “follishIn” in the above script user can use following animations
- twisterInDown
- magic
- bombLeftOut
- tinUpIn
- tinRightOut
Just add any of the above classes on hover, and it will give make twitter angry. );
Mad Twitter : Animated Twitter Birds jQuery Plugin
No comments:
Post a Comment