Tydzień piąty: animacja css

W tym tygodniu postanowiłam zająć się efektami i popracować nad tym jak strona się prezentuje. Strona główna otrzymała bardziej wyraźne menu – teraz po najechaniu na nazwę podstrony, zmienia się kolor i cały element się powiększa. Zobaczcie!

index animation1

Podobnie wszystkie elementy stopki zmieniają rozmiar na większy.

Nazwa strony w nagłówku dostała efekt specjalny – ease in back. Zajrzycie koniecznie na easings.net – listę funkcji wygładzających, którą odkryłam wczoraj. Nie wszystkie da się zrobić w czystym CSSie, ale każda jest szczegółowo opisana.

Podstrona ze zwierzęciem również dostała efekt scale() przy najechaniu myszą. Dodatkowo, dodałam speech bubble – również zrobione w CSSie – które później schowam i pokażę po kliknięciu za pomocą JQuery.

speech bubble

Jak zawsze kod możecie przejrzeć na moim GitHubie.

Co do animacji, na pewno chcę jeszcze popracować nad menu-triggerem. Wydaje mi się, że nie jest teraz do końca jasne do czego służy. Może podmienię ikonę na napis menu, a może wymyślę jeszcze inną opcję. Zobaczymy. Stay tuned!

Reklamy

2 thoughts on “Tydzień piąty: animacja css

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj / Zmień )

Facebook photo

Komentujesz korzystając z konta Facebook. Wyloguj / Zmień )

Google+ photo

Komentujesz korzystając z konta Google+. Wyloguj / Zmień )

Connecting to %s