Jak utworzyć animację obrazu migawki podzielonego tekstu na Divi

Nakładka obrazu to bardzo kreatywne medium, które zapewnia atrakcyjne wrażenia podczas oglądania dla odwiedzających witrynę. Niestandardowe animacje i efekty najechania to świetny sposób na zaprezentowanie obrazu, który jest obecnie bardzo popularny wśród wszystkich. W dzisiejszym samouczku zobaczymy, jak tworzyć piękne nakładki obrazów z animacją podzielonego tekstu za pomocą Divi .

Dzisiejszy tutorial podzieliliśmy na trzy części. W pierwszej części zobaczymy, jak stworzyć niestandardową nakładkę obrazu, a w następnej dodamy trochę kodu do projektu. Na koniec zobaczymy, jak stworzyć unikalny projekt nakładki obrazu za pomocą wbudowanej opcji Divi .

Zacznijmy bez zwłoki.

Zapowiedź

Zanim zaczniemy dzisiejszy samouczek, spójrz na nasz projekt, którego będziemy się dzisiaj uczyć.

Twórz niesamowite strony internetowe

Z najlepszym darmowym kreatorem stron Elementor

Zacząć teraz

Zanim zaczniemy

Divi to świetny motyw WordPress, który zapewnia imponujące funkcje i służy prawdziwemu celowi uniwersalnego motywu WordPress. Jego łatwy w użyciu kreator stron ma wiele funkcji, które mogą tworzyć niesamowite projekty. Pobierz motyw i aktywuj go po instalacji.

Utwórz nową stronę z pulpitu WordPress i otwórz stronę do edycji za pomocą kreatora Divi . Wybierz „Buduj od podstaw” i jesteśmy gotowi do pracy!

Sekcja 1: Budowanie projektu

Wspomnieliśmy wcześniej, że w pierwszej części stworzymy strukturę naszego projektu. Gdy tylko zakończymy konfigurację nakładki obrazu z dzielonymi migawkami tekstowymi, załadujemy animację w następnej części.

Dodaj: rząd 1

Ustawienia wiersza

Dodaj zwykły wiersz z 2 kolumnami w sekcji i przed dodaniem kolejnych modułów zmień następujące ustawienia.

• Szerokość rynny: 2

Ustawienia kolumny

Kolumny będą zawierały nasze obrazy i elementy nakładki migawki, więc będzie to nasz główny kontener. Ponadto ta kolumna zainicjuje efekty najechania animacją migawki. Po prostu, gdy mysz wejdzie do tej kolumny - cała animacja zostanie uruchomiona, a gdy tylko mysz zostanie wyłączona, powróci do poprzedniego stanu.

Dodaj klasę CSS do kolumny, aby wybrać naszą kolumnę jako „kolumnę migawki” i animować ją później „po najechaniu myszą”.

• Klasa CSS: kolumna migawki po najechaniu kursorem

Dokonaj również następujących korekt.

• Przepełnienie poziome: ukryte
• Przepełnienie pionowe: ukryte

Dodaj: moduł obrazu

Teraz dodamy nasz główny obraz, który znajdzie się za naszą nakładką migawki z modułem obrazu.

Teraz dokonaj niewielkiej zmiany w wyrównaniu w zakładce projekt.

• Wyrównanie obrazu: Środek

Tworzenie tekstu podzielonego na górną migawkę

Po umieszczeniu naszego obrazu dodamy moduł tekstowy pod modułem obrazu, aby dodać górną migawkę.

Aktualizacja Moduł tekstowy z tekstem.

Otwórz kartę projektu, dokonaj tych zmian.

• Czcionka tekstu: Poppins
• Grubość czcionki tekstu: Ciężka
• Styl czcionki tekstu: TT
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 150px (komputer), 20vw (tablet i telefon)
• Odstępy między literami tekstu: -0,03 em
• Wysokość linii tekstu: 0em
• Wyrównanie tekstu: do środka

Teraz zaktualizuj ustawienia rozmiaru i odstępów.

• Szerokość: 100%
• Wzrost: 50%
• Margines: 0px dół

Teraz dodaj następującą klasę CSS z zakładki zaawansowane.

• Klasa CSS: górna przesłona

Później użyjemy klasy do włączania i wyłączania animacji transformacji z niestandardowym kodem. Następnie dodaj ten kod CSS do elementu głównego.

display:flex;
align-items:flex-end;
justify-content:center;

Aby nasz tekst był na miejscu, musimy wprowadzić te zmiany.

Tworzenie tekstu podzielonego na dolną migawkę

Ponieważ nasz tekst podziału górnej migawki jest gotowy, zduplikuj moduł tekstowy, aby utworzyć tekst podziału dolnej migawki. Nie musisz dodawać żadnej klasy CSS; ponieważ właśnie sklonowaliśmy poprzedni moduł, klasa CSS już tam jest. Ale musimy wprowadzić pewne poprawki w kodzie CSS w głównym elemencie.

display:flex;
align-items:flex-start;
justify-content:center;

Odniesienie do „flex-start”, tekst jest wyrównany w pionie u góry modułu. W poprzednim module tekstowym ustawiliśmy wysokość linii na 0, więc widoczna będzie dolna połowa całego tekstu.

Dodaj pozycję bezwzględną z przesunięciem w pionie.

• Przesunięcie w pionie: 50%

Teraz pomyślnie stworzyliśmy strukturę naszego dzisiejszego samouczka, w której w następnej części wykonamy animację z kodowaniem. Zmieńmy nazwy modułów, aby lepiej je zrozumieć w przyszłości.

Sekcja 2: Kodeks

Aby wprowadzić efekt animacji migawki na naszą strukturę, potrzebujemy trochę kodu CSS i JS. W tym celu użyjemy modułu Code. Dodaj moduł kodu u góry prawej kolumny.

Kod CSS

Wklej następujący kod CSS w tagu stylu.

/* transition duration of shutter animation */
.top-shutter,
.bottom-shutter {
  transition: transform 1s;
}
/* disables all transform options created in
Divi Builder for both shutters */
.divi-transform-none .top-shutter,
.divi-transform-none .bottom-shutter {
  transform: none;
}
.on-click {
  cursor:pointer;
}

Kodeks JS

Następnie dodaj następujący kod JQuery wewnątrz tagu skryptu.

(function ($) {
  $(document).ready(function () {
    /*
  Toggle shutter transform animation on hover.
  To work, Divi Column with shutters must include
  these CSS Classes: "shutter-column on-hover divi-transform-none".
  */
    $ShutterColumnToHover = $(".shutter-column.on-hover");
 
    $ShutterColumnToHover.hover(function () {
      $(this).toggleClass("divi-transform-none");
    });
 
    /*
  Toggle shutter transform animation on click.
  To work, Divi Column with shutters must include
  these CSS Classes: "shutter-column on-click divi-transform-none".
  */
    $ShutterColumnToClick = $(".shutter-column.on-click");
 
    $ShutterColumnToClick.on("click", function (e) {
      $(this).toggleClass("divi-transform-none");
      e.stopPropagation();
    });
 
    $(document).on("click", function (e) {
      if ($(e.target).is(".shutter-column.on-click") === false) {
        $ShutterColumnToClick.addClass("divi-transform-none");
      }
    });
  });
})(jQuery);

Sekcja 3: Projekt animacji podzielonego tekstu migawki

Teraz skopiujemy pierwszą część naszego projektu, aby stworzyć naszą pierwszą animację migawki.

Dodaj: Właściwości transformacji górnej migawki

Zwykle, gdy animujemy coś za pomocą CSS Transform Properties, na początku nie ma stylu transformacji dla tego elementu. Następnie po najechaniu na element możemy zobaczyć ten styl. W Divi odwrócimy cały proces. Najpierw przekształcimy ten element za pomocą Divi Builder. Zaletą tego jest to, że możemy wszystko edytować wizualnie. Następnie, gdy stylizacja zostanie zakończona, początkowo wyłączymy ją za pomocą klasy CSS. Następnie włączaj i wyłączaj go, gdy użytkownik wchodzi w interakcję z nakładką.

Aby dodać projekt transformacji do górnej migawki, otwórz ustawienia modułu tekstowego górnej migawki i zaktualizuj następujące elementy:

• Skala transformacji (X i Y): 150%
• Przekształć Przesuń oś Y:Â -101%
• Przekształć pochodzenie: górny środek

Jeśli wszystko zmodyfikujesz poprawnie, tekst górnej migawki nie będzie już widoczny, ponieważ chcemy, aby cały obraz był widoczny po przejściu animacji.

Dodaj: Właściwości transformacji dolnej migawki

W przypadku dolnej przegrody zaktualizuj następujące opcje projektu przekształcenia:

• Skala transformacji (X i Y): 150%
• Przekształć Przesuń oś Y: 101%
• Przekształć pochodzenie: dolny środek

Dodaj: klasa CSS, aby wyłączyć właściwość transformacji (początkowo)

Wiemy już, że po zaprojektowaniu właściwości transformacji dla animacji migawki, wyłączymy projekty transformacji za pomocą małej klasy CSS. Ze względu na niestandardowy kod CSS, który dodaliśmy wcześniej, projekt pojawi się bez żadnych projektów transformacji.

Dodaj: Funkcjonalność po kliknięciu

Nasza pierwsza animacja dotyczyła efektu najechania. Tak więc najechanie kursorem myszy na obraz i tekst faktycznie uruchomi animację. Teraz zobaczymy, jak możemy to zrobić za pomocą kliknięcia myszą bez najeżdżania.
Bardzo proste, pominiemy polecenie „najechanie kursorem” i dodamy do sekcji polecenie „po kliknięciu”.

• Klasa CSS: kolumna migawki po kliknięciu divi-transform-none

Więc projekt będzie wyglądał tak.

Odwracanie animacji

Teraz, jeśli chcemy, możemy zrobić animację, w której cały obraz pozostanie wyeksponowany, a tekst pojawi się, gdy najedziemy - co oznacza przeciwieństwo tego, co mamy teraz. Takie animacje możemy łatwo uzyskać, usuwając klasę CSS "divi-transform-none".

Inny projekt

Tutaj mamy inny projekt.

Zaktualizuj okiennice

Wybierz górny i dolny moduł tekstowy z każdego szablonu migawki. Następnie otwórz ustawienia elementów dla obu i zaktualizuj następujące elementy:

• Tło: #ffffff
• Kolor tekstu tekstu: #000000
• Tryb mieszania: ekran

Ostateczny projekt

Tak będzie wyglądał nasz ostateczny projekt.

Wniosek

Każdy projekt, w tym projekt migawki z dzielonym tekstem, można bardzo łatwo wykonać za pomocą Divi . To bardzo skuteczny sposób na przyciągnięcie odwiedzających. Mamy nadzieję, że dzisiejszy samouczek nada nowy wymiar projektowi Twojej witryny. Jeśli podoba Ci się ten samouczek, nie zapomnij dać nam znać w polu komentarzy.