Animacje i efekty zdjęć

Powiększenie obrazu w kadrze

Po ostatnim wpisie dalej zostajemy w klimatach efektów i animacji zdjęć, jakie możemy osiągnać przy użyciu wtyczki The Divi Builder albo za pomocą kodów CSS. Ostatnio pokazaliśmy Wam, jak w kilka sekund wyklikać efekt powiększania zdjęcia, w znaczeniu powiększania całego elementu. Więc po najechaniu kursorem myszy na dany element np. obraz, albo na cały wiersz czy sekcję powoli się on powiększał, a następnie wracał do rzeczywistego rozmiaru. Więcej o tej animacji możecie przeczytać w artykule Animacje i efekty zdjęć: powiększenie obrazu jako całego elementu.  Dzisiaj skupimy się na powiększeniu dodanego zdjęcia, ale w kadrze, co oznacza, że jeżeli dodamy zdjęcie na naszą stronę, to powiększy się tylko obraz, ale nie wysunie się za kadr naszego elementu. Wszystko dokładnie możecie zobaczyć poniżej 🙂

Powiększanie obrazu bez wychodzenia za kadr elementu

Efekt jaki widzicie powyżej jeszcze do niedawna można było osiągnąć używając poniższego kodu: 

[css]
overflow: hidden; }
.et_pb_image img {
transition-duration: 3s;
margin: 0 auto;
display: block;
}
.et_pb_image img:hover {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
z-index: 0;
[/css]

Dzisiaj znajomośc tego triku wydaje się nie być konieczna, ponieważ taki sam efekt uzyskamy za pomocą ustawień wtyczki The Divi Builder. Żeby to zrobić, dodaj nowy wiersz. W ustawieniach wiersza przejdź na zakładkę Zaawansowane, a następnie w pozycji Niestandardowy CSS znajdź pole Główny element kolumny i wklej tam poniższy kod:

[css] overflow: hidden; [/css]

Następnie wstaw moduł Obraz. Przejdź na zakładkę Design i skieruj się do ustawień Transform. Wybierz opcje Hover, a następnie w pozycji Transform Scale zmień wartość podaną w procentach na większą niż 100%. W naszym przykładzie powyżej użyliśmy wartości 115%. Teraz przedź na zakładkę  Zaawansowane i zmien ustawienia Transition. Transition Duration to prędkość z jaką będzie animował Twój obraz. W naszym przykładzie jest to 5000ms. 

Powiększanie tła dowolnego elementu

Podobny efekt do tego, który zastosowaliśmy ze zdjęciem, możemy użyć w przypadku każdeg dowolnego elemenu, wybierając jako tło – obraz.  Poniżej przykład animacji z modułem Tekst.

Dodaj nowy wiersz i w Zaawansowanych ustawieniach, w pozycji Niestandardowy CSS w polu Główny element kolumny dodaj kod:

[css] overflow: hidden; [/css]

Przejdź do ustawien wstawionego modułu – w naszym przypadku jest to Tekst, dodaj tło, następnie przejdź na zakładkę Design i Zaawansowane, aby zmienić ustawienia dla opcji Transform i Transition. Uzyskany efekt powinien być podobny to tego poniżej. 

 

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

by Paulina Kanak

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

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