jQuery kwicks plug-in for creation of animating image title


 

jQuery kwicks plug-in for creation of animating image title

In this section ,you will learn about using jQuery kwicks plug-in for creating animating Title images.

In this section ,you will learn about using jQuery kwicks plug-in for creating animating Title images.

jQuery kwicks plug-in for creation of animating image title

In this section ,you will learn about using jQuery kwicks plug-in for creating animating Title images. The html page contains the four parts of the Image titles which will animate when mouse is hovered on any of the four parts of the image title.

kwicksSlidingBox.html

<html>
<head>
<title>Kwicks Examples</title>

<link rel="stylesheet" type="text/css" href="kwicksSlidingBox/kwicks.css" />
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script src="kwicksSlidingBox/jquery.easing.1.3.js" type="text/javascript">
</script>

<script src="kwicksSlidingBox/jquery.kwicks-1.5.1.pack.js"
type="text/javascript">
</script>

<script type="text/javascript">
$().ready(function() {
$('#example1 .kwicks').kwicks({
max: 200,
spacing: 5
});
});
</script>
</head>

<body>
<h1>kwicks sliding Image Title </h1>
<div id="example1">
<ul class="kwicks">

<li id="kwick1"></li>
<li id="kwick2"></li>
<li id="kwick3"></li>
<li id="kwick4"></li>
</ul>
</div>

</body>
</html>

 OUTPUT

Initial state :

When you hover on any part :

Download Source Code

Click here to see demo

Ads