Wbudowane opcje transformacji Divi okazały się niezwykle przydatnym narzędziem do projektowania, pozwalającym z łatwością zmieniać rozmiar, obracać, pochylać lub pozycjonować dowolny element na stronie. Możesz nawet zmienić elementy w stan najechania, aby uzyskać niesamowite efekty najechania. Dlatego dzisiaj pokażemy Ci, jak wdrożyć te animacje jednym kliknięciem.
Ta metoda wymaga użycia jQuery. Wspaniałą rzeczą w tej technice jest to, że możesz użyć wbudowanych parametrów projektowych Divi aby nadać styl właściwościom transformacji, a następnie włączyć (lub wyłączyć) te właściwości transformacji jednym kliknięciem myszy. Otworzy to mnóstwo unikalnych możliwości ujawnienia treść ukryte poprzez przesuwanie elementów po kliknięciu, a nie po najechaniu myszką. Pomaga także zmniejszyć potrzebę znajomości dużej ilości CSS.
Zacznijmy.
To, czego potrzebujesz, aby zacząć
Do tego samouczka wystarczy Divi. Aby rozpocząć, przejdź do panelu WordPress. Utwórz nową stronę, nadaj jej tytuł i kontynuuj projektowanie w kreatorze Divi na pierwszym planie. Wybierz opcję „Buduj od podstaw”. Teraz jesteś gotowy do pracy!
Podstawowa idea wyjaśniona
Zanim przejdę do zbyt wielu szczegółów w tym samouczku, w kilku słowach przeprowadzę Cię przez działanie tej techniki.
Za każdym razem, gdy dostosowujesz element (sekcję, linię lub moduł) w Divi, dodajesz niestandardowy CSS do tego elementu w tle. Na przykład, korzystając z wbudowanych ustawień Divi, możesz dodać właściwość obracania transformacji do modułu blurb, tak aby obracał moduł wzdłuż osi Z o 20 stopni.
Ale za kulisami tworzysz niestandardowy CSS, który jest dodawany do tego modułu tekstowego i wygląda następująco:
.et_pb_text_0 {transform: rotateZ (20deg); }
Wystarczająco proste. Powiedzmy, że chcesz dodać tę samą opcję przekształcania po najechaniu kursorem. Wystarczy zastosować właściwość transformacji dla stanu najechania kursorem w ustawieniach Divi Builder.
Za kulisami kod będzie wyglądał mniej więcej tak:
.et_pb_text_0: hover {transform: rotateZ (20deg); }
Jeśli jednak chcesz wdrożyć właściwość transformacji jednym kliknięciem, wszystko będzie musiało działać nieco inaczej. Aby wywołać zdarzenie kliknięcia elementu (lub modułu tekstowego), musisz wprowadzić kod JavaScript.
W naszym obecnym przykładzie naszym głównym celem jest po prostu włączanie i wyłączanie właściwości transformacji „transform: rotateZ (20deg)” po kliknięciu. Prostym sposobem na to jest utworzenie niestandardowej klasy CSS z właściwością „transformer: none!” Ważne ”w ustawieniach strony (lub zewnętrznego arkusza stylów). Wyglądałoby to mniej więcej tak.
.toggle-transform-animation {transform: none! important; }
Z tym CSS na miejscu. Możemy dodać klasę CSS „toggle-transform-animation” do elementu modułu blurb, który ma naszą właściwość transform.
Spowoduje to wyłączenie (zastąpienie) właściwości transformacji i uniemożliwi jej początkowe aktywowanie, nawet jeśli styl właściwości transformacji został już do niej dodany.
Teraz wszystko, co musisz zrobić, to aktywować (dodać i usunąć) tę niestandardową klasę CSS po kliknięciu elementu. Tak więc za każdym razem, gdy klikniemy element, klasa zostanie usunięta, a właściwości transformacji (te dodane za pomocą Divi) zostaną wdrożone.
Oto prosty przykład, jak to zrobić. Najpierw dodaj kolejną klasę CSS do modułu blurb o nazwie „transform_target”.
Następnie przejdź do Divi > Opcje motywu > Integracja i dodaj następujący skrypt jQuery do nagłówka Twój blog:
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
To wszystko ! Teraz za każdym razem, gdy klikniesz moduł prezentacji, właściwość transformacji dodana do prezentacji w Divi zostanie aktywowana lub dezaktywowana.
Zbudujmy teraz przykład, abyś mógł zobaczyć, jak może to być przydatne w twoich projektach.
Jak przełączać właściwości transformacji Kliknij, aby wyświetlić zawartość w Divi
W tym przykładzie będziemy trzymać się prostego przykładu z notki użytego powyżej. Następnie dodamy za tym dodatkową notkę, tak aby za każdym razem, gdy klikniesz na górną notkę, przesunie się ona, odsłaniając treść dodatkowa notka znajdująca się za dokumentem.
Tworzenie modułów Blurb z przodu iz tyłu
Następnie dodaj moduł prezentacji do kolumny 1.
Zaktualizuj treść notka, aby zawierała tylko tytuł (usuń domyślną treść), a następnie dodaj ikonę notki.
Następnie zaktualizuj parametry projektu w następujący sposób:
Kolor tła: #4c5866
Kolor ikony: #ffffff
Orientacja tekstu: środek
Kolor tekstu
: Lekki margines niestandardowy: 0px na dole
Niestandardowe wypełnienie: 15% u góry, 15% u dołu, 10% po lewej stronie, 10% po prawej stronie
Wrócimy do tego modułu później, ale na razie musimy utworzyć nasz drugi moduł Blurb, który będzie służył jako moduł „powrotu” z dodatkową treścią.
W tym celu zduplikuj właśnie utworzony moduł prezentacji.
Następnie w drugim module usuń ikonę prezentacji (i domyślny obraz) i dodaj treść z powrotem do modułu. Następnie zaktualizuj parametry projektowe w następujący sposób:
Kolor tła: rgba (76,88,102,0.3)
Kolor tekstu: Czarny
Wyściółka niestandardowa: top 20%
Ustaw moduł przed Podsumowaniem
Teraz, gdy stylizujemy nasze dwie notki, musimy wrócić do pierwszej (górnej) notki i umieścić ją nad ostatnią (dolną) notką. Aby to zrobić, nadamy mu pozycję bezwzględną o wysokości 100% i szerokości 100%.
Najpierw otwórz ustawienia górnego / przedniego modułu prezentacji i zaktualizuj następujące elementy:
wysokość: 100%;
szerokość: 100%;
Następnie dodaj następujący niestandardowy kod CSS do głównego elementu:
pozycja: absolutna! ważna; przejście: wszystkie .5;
Następnie zaktualizuj indeks z w następujący sposób:
Indeks Z: 2000
Bezwzględna pozycja w połączeniu ze 100% wysokością i szerokością oraz indeksem z zapewnia, że moduł blurb pozostaje na górze modułu blurb za nim. Właściwość przejścia to w rzeczywistości czas trwania przejścia opcji transformacji, które wdrożymy po następnym kliknięciu. A "kursor: pointer" służy do zmiany kursora, tak aby użytkownik wydawał się klikalny.
Dodanie opcji transformacji i niestandardowych klas do przedniego blurbu
Nadszedł czas, aby dodać nasze właściwości transformacji do pierwszej wiadomości. Następnie dodamy niestandardowe klasy CSS niezbędne dla naszego jQuery do przełączania tych właściwości po kliknięciu.
W parametrach projektu przedniego blottu dodaj następujące właściwości transformacji:
Skala transformacji X i Y: 20%
Pochodzenie transformacji: u góry na środku
Pamiętaj, że projekt transformacji, który widzisz w tym momencie, będzie uruchamiany po kliknięciu. Po prostu korzystamy z kreatora Divi, aby uzyskać pożądany projekt. W takim przypadku przednia notka kurczy się i zostaje wyśrodkowana u góry jak klikalna ikona.
Gdy skończysz, dodaj dwie klasy CSS potrzebne do ukierunkowania przedniego blurbu za pomocą jQuery w następujący sposób:
Klasa CSS: toggle-transform-animation transform_target
(pamiętaj o oddzieleniu każdej nazwy klasy spacją)
Następnie dodaj następujący niestandardowy fragment kodu CSS, który będzie używany do włączania i wyłączania właściwości transformacji za pomocą jQuery.
.toggle-transform-animation {transform: none! important; }
Zauważysz, że wcześniej dodane właściwości transformacji blurb zostały wyłączone, ponieważ ta klasa została do niej zastosowana.
Teraz przejdź do Divi> Opcje motywu> Integracja i dodaj następujący skrypt jQuery do nagłówka bloga:
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
Zobaczmy wynik końcowy.
Na tym przykładzie możesz tworzyć jeszcze bardziej imponujące projekty. Nie wahaj się podzielić swoją opinią w sekcji komentarzy.
