CSS jest narzędziem wykorzystywanym przez projektantów do tworzenie ciekawie wyglądających stron internetowych oraz pozycjonowania. Dobrze wykonane przejścia czy animacje CSS, mogą skutecznie pomóc w zwiększeniu ruchu na stronie. Sprawdź ciekawe sposoby na wykorzystanie ich na swojej witrynie internetowej.
Zgniecenie, rozciągnięcie i oczekiwanie
Zgniatanie i rozciąganie nawiązuje bezpośrednio do praw fizyki. Jak wszyscy wiemy, każdy obiekt dysponuje określoną masą, która nie zmienia się w momencie ruchu. Podczas odbijania się od ziemi owa masa ulega rozszerzeniu. Reguła quash and stretch w CSS służy właśnie nadawaniu wrażenia, jakby tworzone przez nas animacje posiadały swoją własną masę. Przycisk, który po najechaniu na niego zmienia się w okno dialogowe, z pewnością sprawi, że nasza strona stanie się bardziej atrakcyjna.
Nasze przejścia i animacje będą bardziej żywe, jeżeli ruchy zostaną poprzedzone naturalnym oczekiwaniem. Może być ono przedstawione w formie sprężystości, która sprawi, że widz będzie w napięciu oczekiwał następującego po niej ruchu.
Rozpędzenia, zwolnienia i łuki
Warto zadbać o to, aby ruch naszej animacji nie sprawiał wrażenia mechanicznego i nienaturalnego. Dobrym remedium na taki efekt sztuczności są zastosowania, takie jak rozpędzenia czy zwolnienia. W naturze obiekty nie osiągają maksymalnej prędkości od razu przy wyjściu ze stanu spoczynku. Należy zadbać więc o odpowiednie rozpędzenie. W animacjach CSS określa się to jako „easing”. Jest to nic innego, jak tylko zdefiniowanie prędkości zmian w animacji. Dzięki jej wykorzystaniu animacja rozpoczyna się powoli i stopniowo zwiększa prędkość. Na tej samej zasadzie – może rozpocząć się szybko, a następnie zwolnić.
Analogiczne zastosowanie ma trajektoria łuku. Animację CSS możemy przystosować do tego na różne sposoby. Jednym z nich jest zastosowanie połączenia dwóch animacji – jeden z nich nadaje jej ruch poziomy, a drugi pionowy. Wówczas uzyskujemy efekt odbijającego się obiektu. Innym sposobem jest zastosowanie efektu obracania się obiektu. Więcej o sposobach zastosowania trajektorii ruchu możemy dowiedzieć się ze specjalistycznych podręczników do CSS.
Rysunki w trzech wymiarach
Jedną z najciekawszych możliwości animowania w CSS, jest zastosowanie animowania obiektu w trzech wymiarach. Jeżeli podejmiemy się tego działania musimy pamiętać, aby obiekt przestrzegał zasad perspektywy. Jeżeli zupełnie ją pominiemy, obiekty nie będą wyglądały naturalnie i tym samym nie zachęcą odbiorców do dalszego przeglądania strony. Warto pamiętać, że współczesne przeglądarki internetowe przychodzą nam z pomocą, oferując wsparcie dla wszystkich trójwymiarowych transformacji. Jedyne co musimy zrobić to odpowiednio ustawić obiekt w scenie – przeglądarka zaś zajmie się przejściami.
Podążanie za akcją
Znów wracamy do praw fizyki, które rządzą światem. Wyobraźmy sobie stosunkowo duży obiekt, który znajdując się w ruchu szybko wyhamowuje. Wówczas pojawiają się określone zjawiska, takie jak na przykład przechylenie do przodu. Animacje CSS zapewniają możliwość utworzenia tego typu efektów, które sprawiają, że wykonane obiekty wyglądają szczególnie naturalnie. Możemy stosunkowo łatwo sprawić, aby elementy poruszały się z różnymi prędkościami względem siebie.
CSS daje nam mnóstwo możliwości stworzenia przyciągających wzrok klienta animacji, które nie tylko urozmaicą naszą stronę, ale także poprawią pozycjonowanie. Wymienione powyżej przykłady to tylko kropla w morzu możliwości. Pozostałe efekty, które możemy wykorzystać to między innymi:
- taktowanie i czas trwania,
- akcja drugoplanowa,
- rysowanie progresywne,
- inscenizacja,
- rysunek przestrzenny.
Nadając swoim animacjom nowe efekty możemy spodziewać się nie tylko polepszenia się jej wizualnej strony, ale także poprawy pozycjonowania i optymalizacji. Dzięki temu zwiększy się ruch na stronie, a my będziemy cieszyć się dużą ilością potencjalnych klientów.
Artykuł napisała:
Magdalena Polena – copywriterka, dziennikarka, freelancerka. Na co dzień kolekcjonuje niepotrzebne fakty i wychowuje dwa koty.
Źródło:
- David Sawyer McFarland, Nieoficjalny podręcznik. Wydanie IV (ebook), 2016.