Animacja poklatkowa w CSS3

Animacja poklatkowa w CSS3

Dziś jako inspirację a także odpowiedź na pytanie ,,how it’s made?” proponuję animację logotypu przygotowaną dla Slodkave Weddings. Mogłoby się wydawać, że sama idea animacji poklatkowej jest nieco archaiczna. Nic bardziej mylnego.

Idea

Przemierzając internet, coraz częściej widuję popisowe animacje tekstu czy elementów z key visual. Okazuje się, że te najbardziej skomplikowane wykorzystują pliki PNG z obrazem każdej klatki. Sztuczka polega na ustawieniu początkowej pozycji tła dla elementu i szybkim przesuwaniu go o stałą wartość. Przy odpowiednio dużej liczbie klatek, moment przeskoku staje się niezauważalny i nasz mózg odbiera to jako płynne wypełnienie.

Jak to zrobić

Przede wszystkim zaczynam od przygotowania pliku bez tła. Korzystając z narzędzi Photoshopa, kopiuję warstwę z tekstem jedna pod drugą usuwając stopniowo wypełnienie. Możliwości są tutaj nieograniczone i sposób w jaki obiekt będzie się animował zależy tylko od wyobraźni.

Przygotowany PNG to 99% sukcesu. Pozostaje tylko stworzyć element HTML o zadanej wielkości i wykorzystać keyframes do przewijania tła z góry na dół.

 

@keyframes logo {
   from {
      background-position: center 0;
   }
   to {
      background-position: center -14700px;
   }
}

.logo {
   animation: logo 3s  steps(147, end);
}

 

Wbrew pozorom, przygotowanie tego typu smaczku na stronę nie jest czasochłonne. Logo z przykładu składa się ze 147 klatek – osoba sprawnie poruszająca się w Photoshopie przygotuje prosty set w kilkadziesiąt minut.


Popularne wpisy

Kodowanie

Responsywne menu — 3 sprawdzone rozwiązania

Responsywne menu — 3 sprawdzone rozwiązania

Czytaj to
Mixiny SCSS – czyli jak uprzyjemniam sobie pracę

Mixiny SCSS – czyli jak uprzyjemniam sobie pracę

Czytaj to

Felietony

Błędy początkujących webmasterów, których warto unikać

Błędy początkujących webmasterów, których warto unikać

Czytaj to
Dlaczego frameworki HTML często nie mają sensu?

Dlaczego frameworki HTML często nie mają sensu?

Czytaj to

Inspiracje

Zestaw prostych i ciekawych przycisków na stronę

Zestaw prostych i ciekawych przycisków na stronę

Czytaj to
Najlepsze strony, z których pobierzesz darmowe zdjęcia

Najlepsze strony, z których pobierzesz darmowe zdjęcia

Czytaj to

Newsletter

Maksymalnie raz w miesiącu dostaniesz powiadomienie o nowych wpisach.
Zapisz się do newslettera — ja nie śmiecę.

Ta strona wykorzystuje pliki cookies wyłącznie w celach statystycznych.