Animacje i efekty zdjęć

Powiększenie obrazu jako całego elementu

Dzisiaj trochę efekciarsko, bo o animacjach zdjęć i grafik, które w łatwy sposób możemy dodać do swojej strony dzięki kodom CSS lub za pomocą ustawień wtyczki The Divi Builder. Nie jestem fanem takich rozwiązań i uważam, że im mniej skacze, płynie i porusza się dany element tym lepiej, ale na pewno znajdą się i branże, w których odrobina animacji nie zaszkodzi i osoby, którym animacje po prostu cieszą oko. Jeszcze jakiś czas temu wiele efektów można było uzyskać tylko dzięki dodawaniu kodu CSS, więc osoby, którym trudniej przychodziło przyswajanie wiedzy z tego zakresu miały sporą trudność, żeby jakies zmiany na stronie wprowadzić. Na całe szczęście kolejne aktualizacje motywu przynoszą co raz to nowsze rozwiązania i wiele opcji możemy wykorzystać nawet jeżeli modyfikowanie i tworzenie kodów nie jest nam bliskie. To co? Nie przedłużamy i  zaczynamy!

Powiększanie całego zdjęcia (elementu)

Jak widzicie powyżej, animacja została zastosowana do całego obrazu. Po najechaniu na zdjęcie kursorem obraz powoli powiększa się, a następnie powoli wraca do swojego rzeczywistego rozmiaru. Jeszcze do niedawna osiągnięcie takiego efektu było możliwe dzięki znajomości CSS i dodaniu do wybranego elementu takiego kodu:

[css]
transform: scale(0.9);
transition: .5s;
.et_pb_image:hover {
transform: scale(1.0)
}
[/css]

Obecnie dodawanie kodu CSS do osiągnięcia efektu powiększenia obrazu nie jest konieczne, bo wszystko to możemy osiągnąć przez ustawienia wtyczki The Divi Builder.

Ustawienia Transform i Transition

Żeby osiągnąć efekt powiększenia całego obrazu bez zastosowania jakiegokolwiek dodatkowego kodu CSS użyjemy teraz wyłącznie ustawień wtyczki The Divi Builder.  Standardowo zaczynamy od wyboru szerokości naszej klumny (to jaką wybierzesz nie ma żadnego znaczenia) i dodajemy w niej modduł Obraz.

Następnie przechodzimy na zakładkę Design i kierujemy się do ustawień opcji Transform. Klikamy ikonę strzałki, żeby wyświetlić ustawienia Domyślne i Hover (czyli po najechaniu kursorem myszy). Wybieramy przycisk Hover i ustawiamy wartości większe od 100%. W moim przykładzie jest to 110% co uważam za wystarczające dla zdjęcia powyżej. Następnie przechodzimy na zakładkę Zaawansowane i idziemy do ustawień Transition. W pozycji Transition Duration ustawiamy prędkość z jaką ma się zmniejszać i powiększać nasze zdjęcie.

Jako ciekawostkę dla osób, które jeszcze nie przetestowały wszystkich opcji The Divi Builder dodam, że opcje Transform i Transition możecie zastosować nie tylko do wybranych modułów takich jak obraz, ale również do całych sekcji i wierszy. Wszystko odbywa się na takiej samej zasadzie jak w przypadku opisanych powyżej ustawien dla modułu obraz.

by Paulina Kanak

właścicielka domen Canaq.net | Canaq.pl

© Copyright 2014 | Wszelkie prawa zastrzeżone
cq.canaq@gmail.com