Czym byłyby nowoczesne multimedia bez animacji? Na pewno, nie byłyby atrakcyjne dla przeciętnego użytkownika. Przeciętny użytkownik multimediów lubi oglądać różne efekty. Również, efekty na stronach WWW, które sprawiają że korzystanie ze stron jest o wiele przyjemniejsze.
Jednym z takich efektów są animowane przyciski, które reagują zależnie od akcji wykonanej przez użytkownika strony.
W dzisiejszym wpisie pokażę jak stworzyć przyjemny w użytkowaniu animowany przycisk tylko i wyłącznie za pomocą CSS.
Sekcja 1Animowany przycisk - struktura kodu HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="buttons">
<a title="" href="" class="button left">
<i class="icon-star"> </i>
Przycisk 1
</a>
<a title="" href="" class="button middle">
<span class="icon-chevron-left"> </span>
<span class="label">Przycisk 2</span>
</a>
<a title="" href="" class="button right">
<span class="label">Przycisk 3</span>
<span class="icon-chevron-right"> </span>
</a>
</div> |
Jak widać, w kodzie powyżej zostały umieszczone 3 znaczniki linków jeden po drugim. Wszystkie z nich mają klasę button i znajdują się w kontenerze o klasie buttons.
Sekcja 2Animowany przycisk - magia kodu CSS
Aby osiągnąć efekt animacji przycisków, wykorzystamy możliwości CSS3, a w szczególności animacji wykonywanych przez przesunięcie: transistion, która przyjmuje 4 parametry:
- własność animowaną (np. height lub all, czyli wszystkie własności),
- czas trwania animacji w sekundach,
- typ animacji (np. linear lub ease-out),
- opóźnienie (pominięte w tym przykładzie).
Kod CSS, który odpowiedzialny za nadanie wyglądu i animacji dla wcześniej przygotowanej struktury HTML wygląda następująco:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | .buttons { background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%); height: 30px; border: 1px solid #000; position: relative; border-radius: 5px; box-shadow: inset 0 0 2px rgba(255,255, 255, 0.1); text-align: center; overflow: auto; float: right; *max-width: 250px; } .buttons, .buttons a { color: #fff; font-weight: bold; line-height: 30px; display: block; text-decoration: none; } .buttons .button { display: block; float: left; position: relative; height: 30px; } .buttons .button span { height: 30px; display: block; float: left; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .buttons .button .label { padding: 0 10px; } .buttons .button:hover .label, .buttons .button:focus .label, .buttons .button:active .label { text-decoration: none; } .buttons .button:hover, .buttons .button:focus, .buttons .button:active { background: linear-gradient(to bottom, #999999 0%, #292929 100%); background-clip: padding-box; } .button [class^="icon-"] { display: inline-block; width: 14px; height: 14px; *margin-right: .3em; line-height: 14px; vertical-align: text-top; background-image: url("img/glyphicons-halflings-white.png"); background-position: 14px 14px; background-repeat: no-repeat; margin-top: 1px; } .button .icon-star { background-position: -120px 0; } .button .icon-chevron-left { background-position: -432px -72px; } .button .icon-chevron-right { background-position: -456px -72px; } .buttons .left { padding: 0 10px; display: block; border-right: 1px solid #000; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .buttons .middle [class^="icon-"], .buttons .right [class^="icon-"] { height: 16px; margin: 7px; text-indent: 100%; white-space: nowrap; overflow: hidden; } .buttons .middle { overflow: hidden; float: left; max-width: 28px; transition: all 0.5s linear; } .buttons .middle:hover { max-width: 300px; } .buttons .middle .label { max-width: 0; display: none; transition: all 0.5s linear; } .buttons .middle:hover .label { max-width: 200px; display: block; padding: 0 10px; } .buttons .right { overflow: hidden; float: right; max-width: 300px; border-left: 1px solid #000; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .buttons .right [class^="icon-"] { float: right; } .buttons .right .label { max-width: 200px; } |
W powyższym kodzie CSS zostały wykorzystane elementy Twitter Bootstrap (ikony). Animacje zostały dodany do przycisku środkowego oraz do jego etykiety (span z klasą label). Ich celem jest animowanie własności, które zostały zmienione podczas najazdu na środkowy przycisk (stan hover), czyli między innymi szerokość i padding. Wszystkie te własności mają animację liniową (czyli bez przyspieszeń i zwolnień).
W kodzie powyżej, celowo pominąłem własności CSS z rozpoczynające się odpowiednimi prefiksami, które umożliwiają działanie kodu w innych przeglądarkach, np. Operze.
Przeglądarki, które nie wspierają efektów CSS-owych animacji, będą pokazywać zwykłe pojawienie się tekstu w środkowym przycisku.
Sekcja 3Animowane przyciski - podsumowanie
Jak widać, animacje uzyskiwane za pomocą CSS są bardzo łatwe do wykorzystania. Należy również dodać, że są one również o wiele mniej zasobożerne niż animacje uzyskiwane za pomocą JS i przede wszystkim o wiele bardziej płynne.
Animowanie przycisków sprawia, że strona zaczyna ożywać. Interakcja użytkownika z interfejsem wydaje się być wtedy ciekawsza i bardziej wciągająca. Należy jednak też pamiętać, że co za dużo to nie zdrowo, tak jak ze wszystkim, i bardzo wskazany jest zdrowy rozsądek.
| Przeglądarka | wsparcie |
|---|---|
 |
tak |
 |
tak |
 |
tak |
 |
tak |
 <10/10 |
nie/tak |
Animowane przyciski będą działały we wszystkich nowoczesnych przeglądarkach. Niestety, dla Internet Explorera 9 (i niżej) efekt animacji nie zostanie uzyskany.
Demo z tego artykułu można zobaczyć tutaj: animowany przycisk z wykorzystaniem CSS
