By
inspiration www.iuvo.si
When searching for the right words to describe a website or technique used on a page, just occasionally there will be a word that fits perfectly for each of the word’s definitions. For Jan Zavri’s iuvo.si site, that word has to be ‘flourish’.
The word suggests healthy and vigorous growth, especially as the result wof a congenial environment and this well thought out and beautifully presented site is certainly that. Flourishing also describes the act of ‘waving’ something to attract attention; with the animated icons on the homepage rotating dramatically as the page finishes loading. These well placed animations are a great way to instantly attract a visitor’s attention.
TECHNIQUE
The animated rollover button
Are you game?
The technique uses the ever-popular zombie theme for its subject and the visitor is invited to choose between a gun, a hunting knife or a chainsaw. The HTML head sets the page title and links to the stylesheet.
001 <!DOCTYPE html> 002 <html> 003 <head> 004 <meta charset=”utf-8”> 005 <title>Zombie Time - Choose your weapon</title> 006 <link href=”css/style.css” rel=”stylesheet”> 007 </head>
Front and centre
The content sits inside an inner <div> inside an outer <div> to conveniently centre it on the page. The weapon icons are assigned the ‘.rotate’ class and that’s really all there is to the HTML file.
001 <body> 002 <div class=”outer-div”> 003 <div class=”inner-div”> 004 <h3><a href= 005 “https://www.flickr.com/photos /mhogan35/6004524648/in/ set-72157629484097771”> 006 Image by Matthew Hogan licensed for use under Creative Commons</a></h3> 007 <h1>It’s Zombie Time</h1> 008 <h2>Choose your weapon</h2> 009 <img class=”rotate” height=”300px” src=”images/1.svg” width=”300px”> 010 <img class=”rotate” height=”300px” src=”images/2.svg” width=”300px”> 011 <img class=”rotate” height=”300px” src=”images/3.svg” width=”300px”> </div> 012 </div> 013 </body> 014 </html>
Fonts and background
In the stylesheet a suitable zombie-like font is chosen for the background together with the now-familiar code for setting a full-page background image. The image is by the very talented Matthew Hogan, used under Creative Commons licence and linked to from the HTML.
001 @import url(http://fonts.googleapis.
com/css?family=Nosifer|Exo);
002 html {
003 background: url(../images/zombie.
jpg) no-repeat center center fixed;
004 -webkit-background-size: cover;
005 -moz-background-size: cover;
006 -o-background-size: cover;
007 background-size: cover;
008 color: #fff;
009 }
010
The .rotate class
Skipping over the styling of the text for a moment and focusing on the animation, all we’ve done in the following code snippet is make sure that the duration of the spin effect is set at 0.8 seconds, while transform is targeted as the transition property.
001 .rotate {
002 -webkit-transition-duration: 0.8s;
003 -moz-transition-duration: 0.8s;
004 -o-transition-duration: 0.8s;
005 transition-duration: 0.8s;
006 -webkit-transition-property: -
webkit-transform;
007 -moz-transition-property: -moz-
transform;
008 -o-transition-property: -
o-transform;
009 transition-property: transform;
010 }
You spin me round
Finally, two transforms are added to the element when it is hovered: a 360-degree rotation and a scale growing its size by 30 per cent. The elements simply return to their non-transformed state when no longer hovered in the same transition-duration, ie 0.8 secs. That’s all there is to it! You now have an animated icon button – but use it sparingly for maximum effect.
