Hoe een uitstekend animatie-effect in Divi Image Gallery te brengen

Rifat T Oct 16, 2021

Divi-afbeeldingengalerij is een handige module voor het maken van volledig functionele galerijen binnen een website. Als je een modeliefhebber of fotograaf bent, heb je misschien een galerij op je website nodig om je projecten te laten zien. U weet misschien niet of Divi over alle benodigde ingebouwde apparatuur beschikt om een uitstekend animatie-effect in de afbeeldingengalerij te brengen. Vandaag zullen we proberen om ripple-off-animatie te maken met anime.js met Divi builder en een creatieve afbeeldingsgalerij-animatie te zien. Laten we beginnen zonder meer tijd te verspillen.

Voorbeeld

Dit is hoe onze galerij eruit zal zien nadat we de volledige tutorial hebben gedaan.

Animatie toevoegen aan een Divi Image Gallery

Deel 1: Lay-outontwerp voor galerijpagina's

Het deel

Eerst zullen we de instellingen voor de eerste sectie openen en de genoemde wijziging aanbrengen.

  • Achtergrondverloop links Kleur: #15d6c2
  • Achtergrond verloop juiste kleur: #000000
  • Startpositie: 50%
  • Eindpositie: 25%

We zullen de opvullingsinstellingen op het ontwerptabblad bijwerken.

Maak geweldige websites

Met de beste gratis paginabuilder Elementor

Begin nu
  • Vulling: 0px boven, 0px onder, 0px links, 0px rechts

Vervolgens zullen we de overloopinstellingen bijwerken vanuit de zichtbaarheid op het tabblad Geavanceerd.

  • Horizontale overloop: verborgen
  • Verticale overloop: verborgen

Rij 1 Toevoegen

We zullen een rij met één kolom toevoegen die onze paginatitel bevat.

Laten we vervolgens vanuit de rij-instellingen de opvulling bijwerken:

  • Vulling: 15px boven, 15px onder

Tekstmodule toevoegen

De volgende stap is het toevoegen van een tekstmodule aan de rij. Deze module fungeert als de paginatitel.

Voeg nu de inhoud van uw keuze toe en selecteer Kop 1 in het getoonde menu op de afbeelding.

Daarna gaan we naar het ontwerpgedeelte en werken de volgende instellingen voor de kop bij:

  • Koplettertype: Poppins
  • Koptekst uitlijning: midden
  • Koptekstkleur: #ffffff
  • Koptekstgrootte: 100px (desktop), 80px (tablet), 60px (telefoon)

Rij 2 Toevoegen

We zullen nog een rij aan dezelfde sectie toevoegen. Het zal werken als onze galerijmodule.

Voeg vanuit de rij-instellingen een zwarte achtergrondkleur toe aan de rij.

  • Achtergrondkleur: #000000

We moeten veel updates doen aan het ontwerptabblad. dus goed volgen. Ga eerst naar de maatinstellingen.

  • Gebruik aangepaste gootbreedte: JA
  • Gootbreedte: 1
  • Breedte: 95%
  • Minimale hoogte: 80vh

Voeg nu wat opvulling toe aan de rij.

  • Vulling: 0px boven, 0px onder

Het is tijd om wat doosschaduw toe te voegen.

  • Box Shadow: zie screenshot
  • Box Shadow Verticale Positie: 0px
  • Doosschaduw Horizontale positie: 0px
  • Box Shadow Spread-sterkte: 70px
  • Schaduwkleur: #000000

Deel 2: Ontwerp van galerijmodule

Het is tijd om de galerijmodule aan ons ontwerp toe te voegen.

Vanaf het inhoudtabblad van de galerijmodule. Voeg minimaal 25 afbeeldingen toe. Dit is een redelijk goede hoeveelheid voor afbeeldingen om een uitstekend animatie-effect te hebben.

Breng na het uploaden van de afbeeldingen de volgende wijzigingen aan:

  • Aantal afbeeldingen: 25
  • Toon titel en bijschrift: NEE
  • Paginering tonen: JA

Overlay- en pagineringontwerp

Update overlay-instelling vanaf het ontwerptabblad:

  • Kleur overlaypictogram: #ffffff
  • Achtergrondkleur overlay: rgba(22,215,195,0.55)
  • Overlay-pictogram: plus-pictogram (zie screenshot)

Het is tijd voor pagineringsinstellingen.

  • Paginering Tekstuitlijning: Midden
  • Paginering Tekstgrootte: 2em
  • Hoogte pagineringregel: 2em
  • Vulling: 10px boven, 10px onder, 5px links, 5px rechts

Geavanceerde styling

We zullen nu wat geavanceerde stilering voor de galerij doen. Laten we eerst als volgt wat CSS aan het Galerij-item toevoegen:

Galerij-item CSS (desktop)

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

Galerij-item CSS (tablet)

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

Galerij-item CSS (mobiel)

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

Voeg de volgende CSS-code toe aan het pagineringsvak van de galerij.

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

Plaats deze CSS-code ook in het actieve paginavak voor paginering.

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

Voeg nu een CSS-klasse toe aan de galerijmodule voordat we deze opslaan.

  • CSS-klasse: et-anime-galerij

Deel 3: Het animatie-effect toevoegen met JQuery en Anime.js

We zijn klaar met ons ontwerp. Het is tijd om eenvoudige codering toe te voegen om het aantrekkelijker te maken. Daarom zullen we een codemodule toevoegen onder de galerijmodule.

De CSS

Plak nu de volgende CSS-code in de inhoud doos binnen Style-tags.

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

De Anime.js-bibliotheek

Voeg onder de CSS-code deze bron toe in Script- tags om de Anime.js-bibliotheek aan ons ontwerp toe te voegen.

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

jQuery-code

Nu voegen we de jQuery-code toe aan de scripttags .

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" }
        ),
      });
    }
  });
});

Bewaar en sluit het.

Laatste blik

Zo ziet onze Gallery eruit, prachtig is het niet.

Laatste woorden

Als het beste animatie-effect kan worden bereikt door een paar kleine wijzigingen in plaats van de standaardanimatie in de galerij te gebruiken om bezoekers een betere gebruikerservaring te geven, is het verstandig om zoiets kleins te doen. In de tutorial van vandaag heb je gezien hoe we prachtige, boeiende galerij-animaties hebben gemaakt met het ingebouwde systeem van Divi en wat lichtcode. Als je deze tutorial leuk vindt, deel hem dan met je Divi Lover-vrienden.

Divi WordPress Theme