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.
