Czas czytania: ok. 10 min.
Data aktualizacji: 2 stycznia 2024
Animacje na stronie internetowej i ich zastosowanie
Animacje przewijają się na każdym kroku. Spotkamy się z nimi w reklamach, na interaktywnych bilbordach, w sztuce, ale także na stronie internetowej. Nie należy też ukrywać, że samo ich znaczenie i przeznaczenie również rośnie. Nie jest to już tylko element estetyki, ale też sposób na lepsze zaprezentowanie swojego przekazu, oferty etc. To, co jest również istotne to rodzaj animacji. Na stronie możemy wprowadzić rozmaite rozwiązania, które nadadzą jej dynamizmu i o tym sobie właśnie w tym materiale powiemy. Czym są animacje? Do czego wykorzystać je na stronie oraz jakie rozwiązania w tym kierunku oferuje kreator stron www WebWave. Sprawdźmy to!
Animacja - co to?
Zanim przejdziemy sobie do zastosowań animacji możliwości, jakie mamy w tym kierunku, jeśli chodzi o projektowanie elementów na stronie, powiemy sobie o samej definicji.
MasterClass mówi o animacji jako o procesie ożywiania ilustracji lub obiektów nieożywionych za pomocą obrazów ruchomych. Techniki animacji manipulują zdjęciami i rysunkami, aby dać złudzenie ruchu i przedstawić odbiorcom narrację na odbiorniku. Co ciekawe są tacy, którzy doszukują się we wczesnej ceramice greckiej zalążków animacji.
Skoro już jesteśmy przy historii, przedstawmy sobie krótki zarys tego, jak wyglądała ona dla animacji.
Krótka historia animacji
Historia animacji wykracza daleko poza historię filmu, ponieważ pierwsi animatorzy na przestrzeni wieków znajdowali sposoby na tworzenie filmów bez kamer czy technologii nagrywania. Do jednych z pierwszych z pewnością możemy zaliczyć ,,The Enchanted Drawing z 1906 autorstwa Stuart’a Blackton’a. Była to animowana sekwencja do której stworzenia wykorzystano standardową kliszę. W projekcie wykorzystano aktora,rekwizyty i technikę poklatkową, która do dziś należy do podstawowych metod kreowania animacji z pojedynczych ujęć.
W historii animacji zapisały się jeszcze takie tytuły jak np. ,,Fantasmagori’’ (kreskówka) i ,,Gertie the Dinosaur” (film animowany). Kolejnymi przełomowymi technikami, które ułatwiły projektowanie animacji, były pętle i keyframing.
Przedwiośnie animacji komputerowej
Zanim pojawiły się profesjonalne rozwiązania do budowania animacji komputerowych, a nawet przed uruchomieniem flagowych narzędzi Adobe (Illustrator i Photoshop) mogliśmy spotkać się z próbami stworzenia czegoś o podobnym wymiarze. Już w latach 40' kompozytor i animator John Whitney zbudował własne urządzenie komputerowe, które dzięki ustawieniom matematycznym miało możliwość tworzenia precyzyjnych linii i kształtów. Wykorzystał je do stworzenia popularnej sekwencji z czołówki filmu ,,Vertigo" (1958) Alfreda Hitchcocka. Za bazowy projekt posłużył mu motyw z plakatu zaprojektowany przez jednego z najsłynniejszych plakacistów Saul'a Bass'a.
Był to jeden z pierwszych filmów pełnometrażowych (i live-action), w których zastosowano tego typu animację.
Animacje na stronie internetowej - zastosowanie
Animacje na stronie www z pozoru mogą wydawać się jedynie dodatkiem, ale w rzeczywistości przynoszą wiele zalet.
Dlaczego warto umieścić je na swojej stronie? Powodów jest wiele. Ten kluczowy może być różny w zależności od przeznaczenia strony. Do najpopularniejszych wliczamy:
-
aspekt estetyczny związany z trendami w web designie dziedziną, jakiej dotyczy strona
-
lepsze przykucie uwagi odbiorcy
-
wzmocnienie pozytywnego doświadczenie użytkownika strony internetowej.
-
lepsze przedstawienie naszej produktów (oferty) - w postaci animacji stają się one bardziej żywe, namacalne
-
zauważalnie lepsza konwersja (można to sprawdzić np. za pomocą testów A/B - jedna ilustracja jest statyczna, a druga w postaci animacji)
-
ciekawsze zaprezentowanie swoich prac, tworząc portfolio online
To kilka najpowszechniejszych czynników.
Dlaczego animacje na stronie są takie istotne?
Witryna, na której zastosowano ruchome elementy, staje się interaktywna. Jej wygląd zmienia się, kiedy użytkownik scrolluje, najeżdża na poszczególne obszary myszką czy klika w nie.
Dzięki temu można odnieść wrażenie, że strona w pewien sposób reaguje na akcje użytkownika. Pozwala to na przyciągnięcie jego uwagi oraz sprawia, że pozostaje on na stronie dłużej.
To z kolei wiąże się z dwoma korzyściami. Po pierwsze, poprawia pozycję witryny w wynikach wyszukiwania. Po drugie, ułatwia właścicielowi strony osiągnięcie założonego celu (na przykład sprzedaży czy pozostawienia danych kontaktowych).
Ponad 600 000 ludzi tworzy strony za darmo, bez kodowania i przy wsparciu AI. Zobacz, jakie to proste
Typy animacji, z jakimi możemy spotkać się na stronie
Na różnych stronach internetowych możemy natchnąć się na różne typy animacji. Część z nich będzie bezpośrednio związana z akcją wykonywaną na stronie i będzie możliwa do osiągnięcia podczas tworzenia projektu (np. przy pomocy kreatora), ale są też takie, do których wykonania konkretne jest dedykowane narzędzie do sporządzania animacji - dla mniej zaawansowanych może to być Canva, a dla tych, którzy wolą poruszać się po specjalistycznych narzędziach, może to być, chociażby After Effect od Adobe.
Oto kilka standardowych animacji, z jakimi spotkamy się na stronie internetowej i oczywiście nie tylko:
-
animacja przy ładowaniu
-
animacja startowa
-
animacja przycisku
-
animacja po hoverze
-
animacja tła
-
animacja tekstu
-
animacja nawigacji
-
animacja galerii obrazów
-
animacja po scrollu
Wyżej przedstawione animacje w łatwością wykonasz a kreatorze stron internetowych WebWave. Jeśli chcesz zobaczyć jak to wygląda w praktyce, sprawdź nasz kurs tworzenia stron internetowych.
Programy do tworzenia animacji
Aby stworzyć animację na swojej stronie, możemy skorzystać z poniższych programów:
- Adobe After Effect
- Canva
- Lottie - do tworzenia prostych animacji i do skorzystania z gotowych zasobów
- Animate.css - do wykorzystania bazy z gotowymi animacjami
Poza narzędziami, które umożliwiają nam tworzenie animacji od podstaw lub platformami, które dają nam dostęp do darmowych i płatnych zasobów, coraz częściej spotkamy się też z rozwiązaniami, które dają nam możliwość zbudowania prostej animacji i automatycznego wygenerowania do niej kodu - HTML, CSS, czy np. JavaScript.
Możemy do nich zaliczyć m.in. wcześniej wspomniane Lottie
Jak stosować animacje na swojej stronie w WebWave
Kreator WebWave również umożliwia korzystanie z funkcji nadających stronie poczucie jej animacji. Nie są to więc typy animacji “filmowych”, a raczej interakcje dodające projektowi dynamiki. Wrażenie ruchu (animacji) możemy osiągnąć na co najmniej kilka sposobów. Jedne z nich będą wpływały na poszczególne, drobne elementy na stronie, a z kolei inne na będą budowały relacje między wieloma z nich (na całej stronie/podstronie lub sekcji).
Animacja przycisku
Jedna z 10 heurystyk Nielsena (o których pisaliśmy szerzej tutaj) mówi o widoczności statusu systemu. Użytkownik powinien zawsze wiedzieć, co dzieje się w danym momencie. Animacja przycisku pozwala pokazać podjęte działania. W praktyce może to wyglądać tak, że przycisk może zmienić swój wygląd - np. w momencie najechania na niego kursorem. W ten sposób dajemy użytkownikowi sygnał, że ma do czynienia z elementem interaktywnym, który można kliknąć.
Animacja buttona zmienia jego wygląd w zależności od zachowania użytkownika. Możemy swobodnie zmieniać jego kolory, przezroczystość czy też nawet same teksty (wygląd standardowy i po najechaniu)
Dzięki zmianie wyglądu przycisku po najechaniu na niego kursorem sugerujmy odbiorcy, że przycisk to element interaktywny i że kryje się za nim jakaś akcja. Kiedy zmieni on wygląd po kliknięciu, użytkownik ma pewność, że skutecznie ją wykonał - np. dodał produkt do koszyka czy zapisał się na newsletter.
Istnieją trzy warianty, względem których ustalamy wygląd przycisku:
-
przy pokazaniu
-
przy ukryciu
-
przy najechania
Animacja obrazu
To sposób na dodanie ilustracjom dynamiki. W WebWave, w tej kategorii możemy wybierać spośród kilku trybów animacji i dostosować je do swoich potrzeb - m.in. ustalić długość animacji czy też jej powtarzalność (jednokrotna lub wielokrotna).
Na stronie stworzonej w WebWave mamy możliwość wyboru spośród wielu trybów i typów animacji tak, aby najlepiej dostosować ten efekt do swoich potrzeb.
Tak jak w przypadku animacji przycisku mamy dostęp do trzech poziomów ustawień:
-
przy pokazaniu
-
przy ukryciu
-
przy najechaniu
Efekt Paralax
To sposób na nadanie stronie wrażenia głębi. Dzięki tej funkcji podczas scrollowania strony jej elementy przemieszczają się szybciej, niż tło. Dzięki temu użytkownik odnosi wrażenie, że pomiędzy nimi znajduje się duża przestrzeń. Zastosowanie efektu paralaksy pozwala na odejście od innego popularnego, ale już opatrzonego trendu flat design.
Efekt Ken Burn
Efekt Kena Burnsa zawdzięcza swoją nazwę reżyserowi filmów dokumentalnych, który często stosował go w swoich produkcjach. To trik, który pozwala na nadanie statycznym grafikom wrażenia ruchu. Dlatego jest często wykorzystywany przez filmowców, jeśli mają do dyspozycji jedynie zdjęcia lub rysunki, a nie materiały wideo. Tę funkcję można z powodzeniem zastosować także na stronie internetowej. Sprawi ona, że statyczny materiał graficzny nabierze cech animacji.
Animowane ikony
Jeśli chodzi o animacje niewielkich elementów, takich jak ikony, dla ułatwienia sobie pracy możemy skorzystać z rozwiązań, jakie oferuje m.in. Lordicon.W swoich zasobach posiadam prawie 9 tys.ikon. Jeśli chcemy dodać je do swojego projektu wykonywanego w kreatorze, wystarczy, że przejdziemy na ich stronę, wybierzemy interesujące nas ikony (w razie potrzeby dokonamy lekkich korekt np. grubości), a następnie przechodzimy do "Reveal full editor". Tam ustalamy parametry i format, w jakim chcemy uzyskać materiał. Może to być HTML (wtedy ikony dodajemy za pomocą możliwości dodania elementu kodu na stronie) lub GIF, który wklejamy jak zwykłe zdjęcie.
Animacja tekstu
To już od jakiegoś czasu jeden z popularniejszych sposobów na nadanie stronie dynamicznego charakteru. Tekst, który staje się widoczny, kiedy użytkownik przewija stronę, zwraca uwagę i powoduje, że strona robi wrażenie bardziej interaktywnej, reagującej na akcję podjętą przez użytkownika
Poza typowymi animacjami możemy mówić również o mniejszych lub większych interakcjach pomiędzy elementami, które sprawią, że nabiorą one “dynamizmu” i uatrakcyjnią odbiór strony przez użytkownika.
Zaczepianie i odczepianie elementów
Zaczepienie elementu sprawia, że będzie on przesuwać się, gdy użytkownik będzie scrollował stronę.
Ta funkcja przyda się, w momencie, gdy chcemy, aby użytkownik, podczas przewijania witryny, nie stracił z oczu danego elementu. Można ją zastosować na przykład do menu, ikon mediów społecznościowych, dłuższego FAQa (tak jak u nas na stronie głównej), czy chociażby przycisku „kup teraz”.
Pokazywanie i ukrywanie elementów
Pokazywanie i ukrywanie elementów bez przeładowania strony
Tego typu interakcje służą do ukrywania, pokazywania lub zmieniania widoczności wybranych elementów na stronie. Możemy wykorzystać je do różnych celów. Do tych popularniejszych zaliczamy m.in.:
- Pop-up
- Slider z filmem
- Rozwijany FAQ
- Bardziej rozbudowane menu
Jak zmienić widoczność elementu?
Do pokazywania i ukrywania elementu posłuży nam opcja zmiany widoczności (elementu) na stronie za pomocą przycisku - pojawia się/ znika po kliku.
Wykorzystamy do tego wcześniej omówione funkcje button'u i etap "akcja po kliknięciu".
W skrócie wygląda to następująco: Akcja po kliknięciu -> Wykonaj interakcję -> Zmień widoczność elementów -> Wybierz elementy
Możemy też sprecyzować czy chcemy, aby po kliku element pokazywał się, bądź też znikał. Ukrycie jest trochę prostsze. W panelu wybieramy komendę "wykonaj interakcję", a następnie "ukryj elementy". Teraz wystarczy zaznaczyć, których z nich ma to dotyczyć. Jest to jedno z podstawowych rozwiązań dla pop-up'ów.W przypadku pokazywania będzie dość podobnie (ale oczywiście odwrotnie), czyli "wykonaj interakcję" -> "pokaż elementy" -> wybieramy te, które domyślnie będą ukryte ("element jest domyślnie:” -> "ukryty”), a dopiero po interakcji pokażą się na stronie.
Jeśli chcemy sprawdzić, czy ustawienia zadziałały, musimy wejść w podgląd projektu. W przeciwnym razie nie zauważymy zmian.
Warto też dodać, że w przypadku interakcji pokazania/ukrycia za pomocą przycisku możemy opracować je w taki sposób, że po kliku coś na stronie zniknie, ale z kolei pojawi się coś innego. Takie "taktyki" mogą pomóc w jeszcze lepszym zaangażowaniu użytkownika. Oczywiście, jeśli będą dla niego ciekawe/korzystne.
Pokazywanie i ukrywanie elementów przy przewijaniu strony
Innym typem pokazywania i ukrywania elementów na stronie jest opcja po scrollu, czyli komenda "Pokaż lub ukryj podczas przewijania" Możemy ustalić, w którym momencie (miejscu) na stronie ma się pojawić, a w którym zniknąć. Jest to trochę podobne do zaczepiania i odczepiania elementów (oczywiście z tym wyjątkiem, że w tym przypadku dany obiekt nie jest widoczny na stałe).
Dodatkowe ustawienia animacji
- Typy animacji - przylot, ukazanie, powiększenie, złożenie i odsłonięcie. W przypadku wyboru niektórych z nich później możemy ustalić jeszcze kierunek, z jakim animacja będzie się przemieszczała
- Parametry ruchu - czas trwania animacji oraz jej opóźnienie (po jakim ma się pojawić)
- Start animacji - do ustalania, w jakim momencie animacja ma się rozpocząć
- Funkcja wygładzająca - dzięki niej możemy określić częstotliwość linii animacji (prędkość)
- Animuj tylko raz - sprawia, że animacja nie pojawiała się przy ponownym scrollowaniu strony.
- Pokaż animacje - sposób na sprawdzenie (przed opublikowaniem strony) jak wygląda animacja
Odpowiednie manewrowanie tego typu interakcjami i dynamicznymi elementami, może wykreować wrażenie jednej wielkiej animacji. Mają przygotowaną wcześniej koncepcje, możemy stworzyć coś na wzór scrollytelling'u (czyli opowieści po scrollu) - angażuje to naszego odbiorcę i pokazuje naszą kreatywność.
Animacje na stronach www: podsumowanie
Animacje na stronie www sprawiają, że strona staje się bardziej atrakcyjna wizualnie. Wpływają też pozytywnie na doświadczenie użytkownika. Dzięki WebWave z łatwością stworzysz animowaną witrynę bez pisania nawet jednej linijki kodu, czy też doświadczenia w projektowaniu.
Wypróbuj nasz kreator za darmo i sprawdź, jak łatwo wykorzystać te funkcje w praktyce.
Dowiedz się więcej o najlepszych praktykach tworzenia stron:
Popularne artykuły.
Kreator stron www WebWave umożliwia tworzenie stron www z pełną swobodą. Strony internetowe możesz tworzyć zaczynając od czystej karty lub wykorzystując szablony www. Strona www bez kodowania? To łatwe - zacznij już teraz.
contact@webwavecms.com
+48 731 395 898
Porozmawiaj z nami na czacie
Od godziny 08:00 do 24:00
Ta strona została stworzona w kreatorze WebWave.
Znajdziesz nas na:
Kreator WebWave.
Oferta.