Animacja w CSS

W dzisiejszym artykule przedstawię Wam jak w bardzo prosty sposób można zrobić aktywną animację w czystym HTML'u z CSS. Dodatkowo do uatrakcyjnienia naszej animacji użyjemy jQuery. Oczywiście będą też potrzebne elementy graficzne, które ja stworzyłem na potrzeby tego wpisu w GIMP'ie. Nasza animacja - duża emotikona, będzie zmieniała "wyraz twarzy" po najechaniu na nią kursorem.

Elementy graficze, które będą nam potrzebne (wszystkie na przeźroczystym tle):

• Okrąg "buźka" z białymi oczami pobierz
• Rzęsy (w jednym pliku) pobierz
• Źrenice podobnie jak rzęsy pobierz
• Minki: pobierz małe pobierz duże
• Inne dodatkowe elementy wedle uznania

Zaczynamy od kodu HTML:

<div id="emoticon">
 <div id="eyelashes"</div>
 <div id="eyes"</div>
 <div id="lips"</div>
</div>

Następnie ubieramy nasze bloki w CSS:

body

{
 margin:0;
 background-color:#c0c0c0;
 padding:0;
}

div

{
 outline:none;
 margin:0;
 padding:0;
}

#emoticon

{
 margin:0 auto;
 background:url('../images/emoticon.png') no-repeat;
 width:630px;
 height:630px;
}

#emoticon:hover, #emoticon

{
 cursor:pointer;
}

#eyelashes, #eyes, #lips

{
 position:relative;
}

#eyelashes

{
 top:8%;
 left:28%;
 background:url('../images/eyelashes.png') no-repeat;
 width:241px;
 height:33px;
}

#emoticon:hover #eyelashes

{
 top:7%;
 left:28%;
}

#eyes

{
 top:30%;
 left:30%;
 background:url('../images/eyes.png') no-repeat;
 width:166px;
 height:55px;
}

#emoticon:hover #eyes

{
 top:26%;
 left:34%;
}

#lips

{
 top:49%;
 left:40%;
 background:url('../images/lips-small.png') no-repeat;
 width:42px;
 height:62px;
}

#emoticon:hover #lips

{
 top:49%;
 left:38%;
 background:url('../images/lips-big.png') no-repeat;
 width:156px;
 height:166px;
}

Na końcu dołączamy pliki jQuery oraz jQuery UI i dopisujemy do sekcji head kodu HTML następujący kod JavaScript:

$(document).ready(function()

{

 $('#emoticon').draggable();
 $('#emoticon').show('explode', 1000);

});

Od teraz nasza emotikona ładuje się animacją jQuery UI - explode oraz mamy możliwość przesuwać ją po całej stronie.

Cała animacja opiera się na zmianie pozycji elementów: rzęs, źrenic oraz ust po wskazaniu (najechaniu kursorem) na przestrzeń emotikony (cały okrąg). Tworząc własną grafikę z innymi rozmiarami, niż te w przykładzie, trzeba pamiętać o ustawieniu nowych pozycji w pliku ze stylami.

Gotowy projekt można pobrać stąd, a działanie zobaczyć tu.
Oczywiście można wykazać się kreatywnością i stworzyć ciekawsze animacje, niż ta stworzona na potrzeby tego wpisu.