When it came time for my employer to redo their website, I made it my goal to really jazz up the site with MooTools. Nothing too fancy and nothing too bright, just some simple effects that show attention to detail and a little bit of fun. I then thought it was the time to use MooTools “kwicks” to give the website a little kick.

Step 1: Create Images

You’ll need an image for kwick, obviously. Make them all the same width. Below are my images, all 285 pixels x 143 pixels. Black borders have been added to show you image dimensions.

Step 2: The HTML

Showing the HTML first will give you a good idea of how kwicks are structured.

<div id="kwick">
	<ul class="kwicks">
		<li><a class="kwick john" href="http://en.wikipedia.org/wiki/John_lennon" title="John Lennon"><span>John Lennon</span></a></li>
		<li><a class="kwick paul" href="http://en.wikipedia.org/wiki/Paul_mccartney" title="Paul McCartney"><span>Paul McCartney</span></a></li>
		<li><a class="kwick george" href="http://en.wikipedia.org/wiki/George_harrison" title="George Harrison"><span>George Harrison</span></a></li>
		<li><a class="kwick ringo" href="http://en.wikipedia.org/wiki/Ringo_starr" title="Ringo Starr"><span>Ringo Starr</span></a></li>
	</ul>
</div>

Step 3: The CSS

There’s minimal CSS involved in this process so don’t worry about stylesheet bloat.

 #kwick				{ width:590px; }
#kwick .kwicks 			{ height:143px; list-style-type:none; margin:0; padding:0; }
#kwick li 			{ float:left; }
#kwick .kwick 			{ display:block; cursor:pointer; overflow:hidden; height:143px; width:134px; }
#kwick .kwick span 		{ display:none; }

#kwick .john 			{ background:url(kwicks/john.gif) no-repeat; }
#kwick .paul 			{ background:url(kwicks/paul.gif) no-repeat; }
#kwick .george 			{ background:url(kwicks/george.gif) no-repeat; }
#kwick .ringo 			{ background:url(kwicks/ringo.gif) no-repeat; }  

You only need to edit two lines of code in this example: 9 and 10. Nine defines the “squeeze” width of each kwick: how slim do you want blurred kwicks? Line 10 defines the maximum width of a kwick, which you’ll likely want to be the full width of your image.

Demo: http://davidwalsh.name/dw-content/kwicks.php
Source: http://davidwalsh.name/get-slick-mootools-kwicks

Related Listings:

1. Kwicks for jQuery – Horizontal Animated Menu Menu of a web page is the most important and...
2. Dynamic Text Effects – MooTools Dynamic text effects (fade ins, moving text, etc.) can enhance...
3. Create a Thumbnail Gallery with Slick Heading and Caption Effect with jQuery This is a simple jQuery tutorial, but can be extremely...
4. A Better Page Navigation Script with MooTools It is only a little script that can turn your...
5. Effects Library Slider – Spry A collection of 14 different effects using the spry framework....

Do you like this post?

Email: