Każdy z nas (web developerów) wie, że nawigacja na stronie WWW zrobiona we Flashu to bardzo zły pomysł i strzał w stopę – dlatego dziś pokażę jak osiągnąć przyjemne dla oka efekty animacji tylko za pomocą samego CSS3.
Przypadek pierwszy: menu w trzech wersjach językowych i widocznymi danymi kontaktowymi zostało zrobione we Flashu. Problem w tym, że twórca wziął e-mail z nieba, czyli wymyślił sobie. I taki testowy e-mail jest na stronie. Stronie, która działa. I każdy widzi ten e-mail, który z kolei nie istnieje. A pan webmaster przy stronie już nie pracuje, plików źródłowych Flasha nie dał (i nie da) – ogólnie nieprzyjemna sytuacja.
A gdyby było to napisane normalnie, poprawnie zgodnie z regułami sztuki – problem by w ogóle nie zaistniał.
Przypadek drugi: klient został namówiony na zmianę starej strony (HTML) na całą we Flash. Całą, calutką. Pominę brak pliterek w tekście, ale najgorsze jest to że strona przestała się pozycjonować. Klientowi obroty ze sprzedaży spadły o… 100%. Smutne ale prawdziwe.
Flashowi mówmy zdecydowane NIE :).
Jednak czasem bywa i tak, że klient chce. I co poradzić? Wytaczamy argumenty racjonalne, nie racjonalne („bo Flash już jest nie modny”) – ale żaden nie przekonuje. Trzeba spuścić pokornie głowę i menu we Flash zrobić.
I takoż ja uczyniłam, a potem bardzo bardzo żałowałam. Tak bardzo tego żałowałam, że postanowiłam jednak przepisać to na HTML/CSS plus jakieś jQuery dla ładnych efektów.
Jednak szukając sposobu na płynną animacje poszczególnych elementów nawigacji w jQuery trafiłam na transitions. To był strzał w dziesiątkę!
Transitions
Na chłopski rozum transitions to przejście (jako płynna animacja) między poszczególnymi stanami elementu. W moim przypadku zmienia się położenie elementu nawigacji w stanie hover. W normalnym stanie element ma margin-top: 20px;, a w momencie najechania kursorem następuje zmiana na margin-top: 0;. Element „skacze” w górę. Prosty efekt do osiągnięcia tylko za pomocą zmiany marginesu górnego.
Dzięki transitions ten „skok” może był płynny i ładniejszy. Zatem dodaję
transition: margin-top 0.3s linear;
do stylów mojego elementu.
Po kolei: pierwsza pozycja określa, na której właściwości zostanie zastosowane przejście, w tym wypadku margin-top. Następnie mamy czas jaki zajmie animacja, czyli 0.3 sekundy – im większa wartość, tym wolniejsza animacja. Ostatnia na liście jest transition-timing-function (wartość linear), która opisuje jak są obliczane pośrednie wartości użyte podczas przejścia. Te obliczane są za pomocą wielomianowych krzywych Béziera trzeciego stopnia – nie będę udawać, że się znam na krzywych Béziera, napiszę tylko że w przypadku mojej animacji nie widzę różnic między rożnymi wartościami.
Oczywiście dla każdej przeglądarki musimy zastosować właściwy przedrostek, więc style potrzebne do animacji wyglądają tak:
#main-nav li a { margin-top: 20px; -webkit-transition: margin-top 0.3s linear; -moz-transition: margin-top 0.3s linear; -o-transition: margin-top 0.3s linear; -ms-transition: margin-top 0.3s linear; transition: margin-top 0.3s linear; } #main-nav li:hover a { margin-top: 0; }
W przypadku kiedy przeglądarka nie obsługuje transitions efekt płynnej animacji zwyczajnie nie wystąpi – będzie za to standardowy skok elementu do góry.
W przypadku mojego menu można zastosować jeszcze kilka przejść – przyjemne dla oka wynurzające się cienie, czy łagodne przeniknięcie zdjęcia BW w kolorowe. Efektów jest dużo – od bardzo prostych do zaawansowanych.
Dzięki CSS3 i transitions można mieć zbajerowane (fruwające, latające, migające) menu bez użycia Flasha.
To teraz najważniejsze pytanie każdego klienta: „a w IE6 będzie działać?” ;).
Dobry post. Sporo na temat przejść w css pojawiło się ostatnio na css-tricks.com, między innyki o tym czym się różnią typy przejść od siebie.
IE6, ale IE8 czyli domyślna przeglądarka win7 niestety ale transition nie obsługuje…
dobrocie, które oferuje css3 są fajne, ale osobiście wolę opierać się na jquery, które daje naprawdę bardzo duże pole do popisu w zakresie animacji, a jednocześnie działa poprawnie na niepoprawnej przeglądarce Microsoftu
@Adrian – ja wiem, że ie8 tego nie obsługuje. Ten efekt tutaj to jedynie ozdobnik – najlepsze jest to, że moi ZU w ogóle nie zwrócili na niego uwagi – z transition czy bez, dla nich nie było różnicy. A ja nie zdecydowałam się na jQuery, bo już nie chciałam dowalać następnego skryptu dla tak nieznaczącego efektu.