4–6 minut
4 proste animację do strony w WordPress –
darmowy Elementor + CSS.
Cześć! W tym artykule pokaże jak wprowadzić proste animacje w WordPress Elementor – wersja darmowa i kodem CSS. Będą to 4 animację:
animowany gradient – płynna zmiana kolorów w tle,
paralaksa – efekt głębi podczas przewijania obrazka,
tilt – przechylenie elementu po najechaniu oraz
zoom on hover – powiększenie obrazka, gdy najedziesz kursorem myszki.
Zapraszam do lektury!
Animowany gradient
Stworzyłam stronę o podróżach kosmicznych. Wcześniej już przygotowałam przycisk, na którym będzie animowany gradient. Przycisk należy umieścić w kontenerze, celem kontroli jego wielkości. Jak widać w strukturze po prawej stronie w głównym kontenerze, jest jeszcze dodatkowy zawierający sam przycisk. Z lewej strony przechodząc na edycję kontenera i układ zmniejszyłam jego szerokość do 32%. Gdybym zostawiła przycisk poza kontenerem, wówczas dostosowałby się
do wielkości głównego kontenera, czego nie chciałam.
Umieszczenie klasy, którą będziemy stylizować przycisk, odbywa się poprzez wejście w edycję przycisku. Następnie zakładka zaawansowane i w układzie prawie przy końcu jest opcja wpisania klasy CSS. W naszym przypadku
gradient-button. Na końcu klikamy Opublikuj.
Stylizacja przycisku odbędzie się tak samo, jak przypadku WordPress Gutenberg, czyli przechodzimy w Kokpicie na zakładkę Wygląd – Dostosuj – Dodatkowy CSS, gdzie umieścimy kod.
W poprzednim artykule o animacjach w WordPress Gutenberg wyjaśniłam każdą linijkę kodu, teraz natomiast przypomnę pokrótce. Dodaje najpierw kod dotyczący animacji:
@keyframes gradientMove {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
Co oznacza kod CSS:
0% – na początku widzimy tylko dwa kolory z całego gradientu,
50% – pierwsze dwa kolory pojawiają się w całości, a kolejne dwa tylko w połowie,
100% – pierwsze dwa kolory znikają, a ostatnie dwa stają się w pełni widoczne.
Następnie dokonam stylizacji już samego przycisku i tła. Kod CSS jest następujący:
.gradient-button {
background: linear-gradient(45deg, yellow, green, white, black);
background-size: 200% 200%;
animation: gradientMove 6s ease infinite;
padding: 20px 20px;
border-radius: 30px;
cursor: pointer;
transition: all 0.3s ease;
}
.gradient-button:hover {
transform: scale(1.05);
filter: brightness(1.1);
}
Wyjaśnienie – ustawiamy tło pod kontem 45 stopni. Nadajemy tłu cztery kolory żółty, zielony, biały i czarny. Linear-gradient to z kolei jest płynne przejście między kolorami, co tworzy efekt stopniowej zmiany barw. Pokazujące się z dołu, z góry, z lewej, z prawej i po przekątnej. Wielkość tła zostanie ustawiona na 200%. Kolejna linijka kodu dotyczy animacji. Ma trwać sześć sekund, w nieskończoność i z powolnym początkiem, potem szybko, zanim się skończy, zwalnia. Margines wewnętrzny będzie miał 20 pikseli, tło przycisku zostanie zaokrąglone na 30 pikseli. Kursor zmieni się w łapkę oraz przekształcenie elementu będzie dotyczyło wszystkich oprócz animacji.
Po najechaniu myszką na przycisk, za co odpowiada kod .gradient-button:hover będzie on się powiększał i kolory tła staną się jaśniejsze.
Paralaksa
W powyższym kontenerze znajduje się efekt paralaksy, w kolejnych krokach pokaże jak dodać taki efekt w Elementor w wersji darmowej.
Pierwszą czynnością, którą wykonam, będzie usunięcie kontenera za pomocą X.
Następnie dodamy nowy kontener nad główną sekcją, przy pomocy plusa.
Do wyboru mam układ Flexbox i Siatkę, wybieram Flexbox.
Strukturę wybieram strzałkę w dół, czyli strukturę pionową.
W strukturze strony widocznej po prawej stronie przenoszę kontener pod przycisk. Natomiast już w edycji kontenera ustawiam jego szerokość na 1500 pikseli i wysokość na 550 pikseli. Kierunek już jest ustawiony na pionowy.
W kontenerze przechodzimy na zakładkę style, tło, wybieramy klasyczne, czyli pierwsza opcja i umieszczamy zdjęcie wysokiej rozdzielczości w kontenerze.
Ostatnią czynnością będzie ustawienie zdjęcia. Pozostajemy w zakładce style, pod zdjęciem ustawiamy np. jego pozycję – na dole pośrodku. Zachowanie tła – określone, powtarzaj – zostawiamy domyślne i rozmiar wyświetlacza wybieramy okładka. Opublikujemy i efekt paralaksy gotowy!
Tilt
Tilt umieszczę na kontenerze, w którym znajdują się trzy dodatkowe kontenery. Po prawej stronie w strukturze mam zaznaczony główny kontener, gdzie umieszczę klasę CSS. Dokonam tego poprzez jego edycję, co widać po lewej, w zakładce Zaawansowane, u dołu Układu, wpiszę w pole Klasy CSS – tilt.
Na Kokpicie wybieram Wygląd – Dostosuj – Dodatkowy CSS i umieszczam kod dotyczący tilt.
.tilt {
transform: rotateX(20deg);
transition: transform 0.5s ease-out;
}
.tilt:hover {
transform: rotateX(0deg);
}
Poprzez transform rotateX ustawiamy przechylenie kontenera pod kątem 20 stopni, które będzie trwało 0.5s i nastąpi powolne przejście. Po najechaniu myszką na kontener ma on wrócić do swojego pierwotnego wyglądu.
Powyżej widać efekt po najechaniu myszki, czyli wrócił kontener do swojego pierwotnego wyglądu.
Zoom on Hover
Zoom to efekt, który sprawia, że obrazek lekko się powiększa, kiedy najdziemy na niego myszką. To bardzo popularny efekt np. w galerii zdjęć.
Zalety:
– Prosty i efektowny sposób, by przyciągnąć uwagę do zdjęcia lub przycisku,
– Działa praktycznie w każdej przeglądarce,
– Nie wymaga dodatkowych wtyczek, wystarczy CSS.
Wady:
– Może lekko „rozszerzać” układ strony, jeśli element nie ma stałych wymiarów,
– Na urządzeniach mobilnych efekt nie zawsze jest widoczny
(brak kursora = brak hovera),
– Jeśli jest używany zbyt często — może wyglądać nieprofesjonalnie.
Efekt zoom umieszczę na powyższym zdjęciu. Najpierw przejdę do jego edycji, co widać po lewej stronie.
Przechodzimy na zakładkę Zaawansowane, w układzie prawie przy końcu wprowadzamy klasę CSS zoom-image. Klikamy Opublikuj.
Wybieramy na Kokpicie Wygląd – Dostosuj – Dodatkowy CSS i wprowadzamy kod dotyczący Zoom, a jest on następujący:
.zoom-image img {
transition: transform 0.3s ease-in-out;
}
.zoom-image img:hover {
transform: scale(1.1);
}
Co on oznacza? Już tłumaczę – po najechaniu myszką na zdjęcie ma ono się powiększyć o 10%, w sposób płynny. Będzie to trwało 0.3 sekundy, z powolnym początkiem i końcem. Taki efekt będzie widoczny po najechaniu myszką na zdjęcie. Kiedy kursor nie będzie już, na zdjęciu wróci on do normalnego rozmiaru.
Jak widać, na powyższym zdjęcie się powiększyło.
A co się stanie, kiedy wprowadzę wartość ujemną? Zdjęcie się powiększy i obróci na osi X!
Wprowadziłam wartość ujemną i jeszcze zmniejszyłam skale! Co widać powyżej, dosyć że zdjęcie się obróciło, to jeszcze pomniejszyło!
Podsumowanie
Animacje to sposób, by ożywić stronę i nadać jej nowoczesny styl — pod warunkiem, że stosowane są z umiarem. Najważniejsze to zawsze pamiętać o równowadze: efekty mają przyciągać uwagę, a nie odciągać od treści.
Sprawdź, jakie można dodać animację kodem CSS w WordPress Gutenberg.
Strona działa, ale nikt się nie odzywa – co sprawdzić?
Strona działa, ale nikt się nie odzywa. Co sprawdzić? Wchodzisz do sklepu, wszystko wygląda…
Strona działała, ale Google jej nie widział. Sprawdziłam te ustawienia WordPress
Strona działa, można ją otworzyć z linku, więc pojawia się pytanie:
dlaczego nie wyświetla się…
Formularz kontaktowy nie wysyła wiadomości
Pewnego dnia dzwoni klient i mówi:
Wysłałam tydzień temu zapytanie przez formularz na stronie,
ale…
WordPress to nie tylko szablon.
WordPress to nie tylko szablon. Co decyduje o tym, czy strona naprawdę działa Na…
SEO-wiec, copywriter i marketer czym się różnią i jak wpływają na stronę
Gdy planujesz stronę internetową albo chcesz ją poprawić, pojawiają się trzy pojęcia:
SEO, copywriting…