A link animation tool for animation effect on your web site. Note that this requires a browser with support for CSS 3D transforms. If CSS 3D is not supported, the presentation will degrade to less exciting 2D transitions. This is a jQuery plugin so you need to import jQuery on your page.
Want to see how it looks in action ? Check out the demo page
You have to add the linkanim class on all the <a> where you want the effect.
You can choose between three different animation.
- Horizontal rotation, use the
la-horiclass on your<a>balise. - Vertical rotation, use the
la-verticlass on your<a>balise. - Helix rotation, use the
la-heliclass on your<a>balise.
Include this in your html.
<script src="js/linkanim.js"></script>If you want you can change the color, the background-color and the time transition. Watch the example.
//Linkanim options
$(document).ready(function(){
$('a').linkanim({
baseColor :"#198DE5", // Add your 'a' style color (just if you haven't the good color after effect)
color :"#ffffff", // 'a' Color after the transformation
backgroundColor :"#198DE5", // 'a' background color after the transformation
duration : "1s" // duration of the animation
});
});
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<meta name="author" content="Arthur Hamon">
<title>LinkAnim</title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="linkanim.js"></script>
<script>
//Linkanim options
$(document).ready(function(){
$('a').linkanim({
color :"#ffffff",
backgroundColor :"#198DE5",
duration : "1s"
});
});
</script>
</head>
<body>
<h1>
<a class="linkanim la-verti" href="http://slipsum.com/">Samuel L Ipsum</a>
</h1>
<p>
Do you see any <a class="linkanim la-heli" href="#">Teletubbies</a>
in here? Do you see a slender <a class="linkanim la-hori" href="#">plastic</a>
tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a
blank expression on his face sitting outside on a
<a class="linkanim la-veri" href="#">mechanical helicopter</a>
that shakes when you put <a class="linkanim la-verti" href="#">quarters</a> in it? No? Well, that's what you see at a toy store. And you
must think you're in a toy store, because you're here shopping for an infant named Jeb.
</p>
</body>
</html>