Erstellen Sie schöne WordPress-Websites mit Divi und Divi Builder

So erzielen Sie einen hervorragenden Animationseffekt in der Divi-Bildergalerie

Rifat Divi Tutorials Jul 13, 2021

Divi-Bildergalerie ist ein nützliches Modul zum Erstellen voll funktionsfähiger Galerien innerhalb einer Website. Wenn Sie ein Modeliebhaber oder Fotograf sind, benötigen Sie möglicherweise eine Galerie auf Ihrer Website, um Ihre Projekte zu präsentieren. Sie wissen vielleicht nicht, ob Divi über alle notwendigen eingebauten Geräte verfügt, um einen hervorragenden Animationseffekt in die Bildergalerie zu bringen. Heute werden wir versuchen, eine Ripple-Off-Animation mit anime.js mit dem Divi-Builder zu erstellen und eine kreative Bildergalerie-Animation zu sehen. Ohne noch mehr Zeit zu verschwenden, fangen wir an.

Vorschau

So wird unsere Galerie aussehen, nachdem wir das vollständige Tutorial durchgeführt haben.

Animation zu einer Divi-Bildergalerie hinzufügen

Teil 1: Layout-Design der Galerie-Seite

Die Sektion

Zuerst öffnen wir die Einstellungen für den ersten Abschnitt und nehmen die erwähnte Änderung vor.

  • Hintergrundfarbe links: #15d6c2
  • Hintergrund mit Farbverlauf rechts: #000000
  • Startposition: 50%
  • Endposition: 25%

Wir werden die Padding-Einstellungen im Design-Tab aktualisieren.

Erstellen Sie erstaunliche Websites

Mit dem besten kostenlosen Seite Builder Elementor

Jetzt anfangen
  • Padding: 0px oben, 0px unten, 0px links, 0px rechts

Dann aktualisieren wir die Überlaufeinstellungen aus der Sichtbarkeit auf der Registerkarte "Erweitert".

  • Horizontaler Überlauf: Versteckt
  • Vertikaler Überlauf: Versteckt

Zeile 1 wird hinzugefügt

Wir fügen eine einspaltige Zeile hinzu, die unseren Seitentitel enthält.

Lassen Sie uns dann aus den Zeileneinstellungen die Auffüllung aktualisieren:

  • Polsterung: 15px oben, 15px unten

Textmodul hinzufügen

Der nächste Schritt ist das Hinzufügen eines Textbausteins zur Zeile. Dieses Modul fungiert als Seitentitel.

Fügen Sie nun den Inhalt Ihrer Wahl hinzu und wählen Sie Überschrift 1 aus dem angezeigten Menü auf dem Bild.

Dann wechseln wir zum Designbereich und aktualisieren die folgenden Einstellungen für die Überschrift:

  • Überschrift Schriftart: Poppins
  • Ausrichtung des Überschriftentextes: Mitte
  • Textfarbe der Überschrift: #ffffff
  • Überschrift Textgröße: 100px (Desktop), 80px (Tablet), 60px (Telefon)

Zeile 2 Hinzufügen

Wir werden dem gleichen Abschnitt eine weitere Zeile hinzufügen. Es wird als unser Galeriemodul funktionieren.

Fügen Sie in den Zeileneinstellungen der Zeile eine schwarze Hintergrundfarbe hinzu.

  • Hintergrundfarbe: #000000

Wir müssen viele Aktualisierungen am Design-Tab vornehmen. also folge genau. Wechseln Sie zunächst zu den Größeneinstellungen.

  • Benutzerdefinierte Dachrinnenbreite verwenden: JA
  • Dachrinnenbreite: 1
  • Breite: 95%
  • Mindesthöhe: 80vh

Fügen Sie nun der Zeile etwas Auffüllung hinzu.

  • Padding: 0px oben, 0px unten

Es ist Zeit, etwas Box-Schatten hinzuzufügen.

  • Box Shadow: siehe Screenshot
  • Vertikale Position des Boxschattens: 0px 0
  • Horizontale Position des Kastenschattens: 0px
  • Stärke der Box-Schattenausbreitung: 70px
  • Schattenfarbe: #000000

Teil 2: Design des Galeriemoduls

Es ist an der Zeit, das Galeriemodul zu unserem Design hinzuzufügen.

Auf der Registerkarte Inhalt des Galeriemoduls. Fügen Sie mindestens 25 Bilder hinzu. Dies ist eine ziemlich gute Menge für Bilder, um einen hervorragenden Animationseffekt zu erzielen.

Nehmen Sie nach dem Hochladen der Bilder die folgenden Änderungen vor:

  • Bildanzahl: 25
  • Titel und Bildunterschrift anzeigen: NEIN
  • Paginierung anzeigen: JA

Overlay- und Paginierungsdesign

Aktualisieren Sie die Overlay-Einstellung über die Registerkarte "Design":

  • Farbe des Überlagerungssymbols: #ffffff
  • Overlay-Hintergrundfarbe: rgba(22,215,195,0.55)
  • Overlay-Symbol: Plus-Symbol (siehe Screenshot)

Es ist Zeit für die Paginierungseinstellungen.

  • Paginierung Textausrichtung: Mitte
  • Paginierungstextgröße: 2em
  • Paginierungszeilenhöhe: 2em
  • Polsterung: 10 Pixel oben, 10 Pixel unten, 5 Pixel links, 5 Pixel rechts

Erweitertes Styling

Wir werden nun einige erweiterte Stilisierungen für die Galerie vornehmen. Zuerst fügen wir dem Galerieelement wie folgt CSS hinzu:

CSS für Galerieelemente (Desktop)

animation: fadeLeft 0s !important;
background: #000000;
padding: 10px;
width: 20% !important;
margin: 0 !important;
clear: none !important;

CSS für Galerieelemente (Tablet)

animation: fadeLeft 0s !important;
background: #000000;
padding: 5px;
width: 25% !important;
margin: 0 !important;
clear: none !important;

CSS für Galerieelemente (Mobil)

animation: fadeLeft 0s !important;
background: #000000;
padding: 5px;
width: 50% !important;
margin: 0 !important;
clear: none !important

Fügen Sie dem Galerie-Paginierungsfeld den folgenden CSS-Code hinzu.

border-top: 0px !important;
padding-top: 20px; 

Fügen Sie diesen CSS-Code außerdem in das aktive Seitenfeld für die Paginierung ein.

color: #15D6C2 !important;
font-weight: bold;

Fügen Sie dem Galeriemodul nun eine CSS-Klasse hinzu, bevor wir sie speichern.

  • CSS-Klasse: et-anime-gallery

Teil 3: Hinzufügen des Animationseffekts mit JQuery und Anime.js

Wir sind fertig mit unserem Design. Es ist an der Zeit, einfache Codierung hinzuzufügen, um es attraktiver zu machen. Aus diesem Grund werden wir unter dem Galeriemodul ein Codemodul hinzufügen.

Das CSS

Fügen Sie nun den folgenden CSS-Code in das Inhaltsfeld innerhalb der Style- Tags ein.

/*hide prev and next pagination links*/ 
.et-anime-gallery li.prev, .et-anime-gallery li.next {
  display:none !important;
  } 

Die Anime.js-Bibliothek

Fügen Sie unter dem CSS-Code diese Quelle in Script- Tags hinzu, um die Anime.js-Bibliothek zu unserem Design hinzuzufügen.

src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"

jQuery-Code

Jetzt fügen wir den jQuery-Code in die Skript- Tags ein.

jQuery(function ($) {
  $(document).ready(function () {
    
    var fromCenter = "center";
    var animeTargetItem = ".et-anime-gallery .et_pb_gallery_item";
    var animeTargetImage = ".et-anime-gallery .et_pb_gallery_image";
    var $paginationLink = $(".et-anime-gallery .et_pb_gallery_pagination li a");
    
		//animate gallery on page load
    animateGalleryFunction(animeTargetItem, animeTargetImage, fromCenter);

    //animate gallery when clicking pagination number link
    $($paginationLink).click(function (e) {
      var pageNum = $(e.target).attr("data-page");
      var fromNum = pageNum*25-25; //replace 25 with image count for gallery module
      animateGalleryFunction(animeTargetItem, animeTargetImage, fromNum);
    });

    function animateGalleryFunction(targetItem, targetImage, stagFrom) {
      //animate gallery image
      anime({
        targets: targetImage,
        rotateX: [0, 360],
        scale: [0.5, 1],
        direction: "normal",
        easing: "easeInOutSine",
        duration: 600,
        delay: anime.stagger(
          200,
          { grid: [5, 5], from: stagFrom },
          { start: "100" }
        ),
      });
      //animate gallery item background
      anime({
        targets: targetItem,
        background: ["#000", "#15D6C2", "#000"],
        direction: "normal",
        easing: "easeInOutSine",
        duration: 600,
        delay: anime.stagger(
          250,
          { grid: [5, 5], from: stagFrom },
          { start: "100" }
        ),
      });
    }
  });
});

Speichern und schließen Sie es.

Letzter Blick

So sieht unsere Galerie aus, ist sie nicht schön.

Letzte Worte

Wenn der beste Animationseffekt durch ein paar kleine Änderungen erreicht werden kann, anstatt die Standardanimation in der Galerie zu verwenden, um den Besuchern ein besseres Benutzererlebnis zu bieten, ist es ratsam, so etwas zu tun. Im heutigen Tutorial haben Sie gesehen, wie wir mit Divis integriertem System und etwas Light-Code wunderschöne, fesselnde Galerieanimationen erstellt haben. Wenn Ihnen dieses Tutorial gefällt, teilen Sie es bitte mit Ihren Divi Lover-Freunden.