Kako prinesti izjemen učinek animacije v galerijo slik Divi

Rifat Divi Tutorials Mar 5, 2022

Galerija slik Divi je uporaben modul za ustvarjanje popolnoma funkcionalnih galerij znotraj spletnega mesta. Če ste modni navdušenec ali fotograf, boste morda potrebovali galerijo na svojem spletnem mestu za predstavitev svojih projektov. Morda ne veste, ali ima Divi vso potrebno vgrajeno opremo za izjemen učinek animacije v galeriji slik. Danes bomo poskušali prinesti animacijo ripple-off z uporabo anime.js z Divi builderjem in si ogledali kreativno animacijo galerije slik. Ne da bi zapravljali več časa, začnimo.

Predogled

Tako bo izgledala naša galerija, ko bomo naredili celotno vadnico.

Dodajte animacijo v galerijo slik Divi

1. del: Oblikovanje postavitve strani galerije

Oddelek

Najprej bomo odprli nastavitve za začetni razdelek in naredili omenjeno spremembo.

  • Leva barva preliva ozadja: #15d6c2
  • Desna barva preliva ozadja: #000000
  • Začetni položaj: 50%
  • Končni položaj: 25%

Posodobili bomo nastavitve oblazinjenja v zavihku načrtovanja.

Ustvarite neverjetna spletna mesta

Z najboljšim brezplačnim graditeljem strani Elementor

Začni zdaj
  • Odmik: 0px zgoraj, 0px spodaj, 0px levo, 0px desno

Nato bomo posodobili nastavitve prelivanja iz vidnosti na naprednem zavihku.

  • Horizontalni preliv: skrito
  • Navpični preliv: skrito

Vrstica 1 Dodajanje

Dodali bomo vrstico z enim stolpcem, ki bo vsebovala naslov naše strani.

Nato iz nastavitev vrstice posodobimo oblazinjenje:

  • Padding: 15px zgoraj, 15px spodaj

Dodaj besedilni modul

Naslednji korak je dodajanje besedilnega modula v vrstico. Ta modul bo deloval kot naslov strani.

Zdaj dodajte vsebino po vaši izbiri in v prikazanem meniju na sliki izberite Naslov 1.

Nato se bomo premaknili v razdelek o oblikovanju in posodobili naslednje nastavitve za naslov:

  • Pisava naslova: Poppins
  • Poravnava besedila naslova: središče
  • Barva besedila naslova: #ffffff
  • Velikost besedila naslova: 100px (namizni računalnik), 80px (tablični računalnik), 60px (telefon)

Vrstica 2 Dodajanje

V isti razdelek bomo dodali še eno vrstico. Deloval bo kot naš galerijski modul.

V nastavitvah vrstice vrstici dodajte črno barvo ozadja.

  • Barva ozadja: #000000

Na zavihku oblikovanja moramo narediti veliko posodobitev. zato pozorno sledite. Najprej se pomaknite na nastavitve velikosti.

  • Uporabite širino žleba po meri: DA
  • Širina žleba: 1
  • Širina: 95%
  • Najmanjša višina: 80vh

Zdaj dodajte nekaj oblazinjenja v vrstico.

  • Odmik: 0px zgoraj, 0px spodaj

Čas je, da dodate nekaj sence škatle.

  • Box Shadow: glejte posnetek zaslona
  • Navpični položaj sence škatle: 0px
  • Horizontalni položaj sence polja: 0px
  • Moč širjenja sence škatle: 70 slikovnih pik
  • Barva sence: #000000

2. del: Oblikovanje galerijskega modula

Čas je, da našemu dizajnu dodamo modul galerije.

Na zavihku z vsebino modula galerije. Dodajte najmanj 25 slik. To je precej dober znesek za slike, da imajo izjemen učinek animacije.

Po nalaganju slik naredite naslednje spremembe:

  • Število slik: 25
  • Naslov in napis oddaje: NE
  • Prikaži paginacijo: DA

Oblikovanje prekrivanja in paginacije

Posodobite nastavitev prekrivanja na zavihku načrtovanje:

  • Barva ikone prekrivanja: #ffffff
  • Barva ozadja prekrivanja: rgba(22,215,195,0,55)
  • Ikona prekrivanja: ikona plus (glejte posnetek zaslona)

Čas je za nastavitve strani.

  • Paginacija Poravnava besedila: na sredino
  • Paginacija Velikost besedila: 2em
  • Višina vrstice paginacije: 2em
  • Padding: 10px zgoraj, 10px spodaj, 5px levo, 5px desno

Napredno oblikovanje

Zdaj bomo naredili nekaj napredne stilizacije za galerijo. Najprej naj ’s doda nekaj CSS elementu galerije, kot sledi:

CSS elementa galerije (namizje)

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

CSS elementa galerije (tablični računalnik)

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

CSS elementa galerije (mobilno)

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

V polje za paginacijo galerije dodajte naslednjo kodo CSS.

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

Prav tako vstavite to kodo CSS v polje aktivne strani paginacije.

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

Zdaj dodajte razred CSS v modul galerije, preden ga shranimo.

  • Razred CSS: et-anime-gallery

3. del: Dodajanje učinka animacije z JQuery in Anime.js

Končali smo z našim dizajnom. Čas je, da dodate preprosto kodiranje, da postane bolj privlačno. Zato bomo pod modul galerije dodali kodni modul.

CSS

Zdaj prilepite naslednjo kodo CSS v polje z vsebino znotraj oznak Style .

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

Knjižnica Anime.js

Pod kodo CSS dodajte ta vir v oznake Script , da v naš dizajn dodate knjižnico Anime.js.

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

koda jQuery

Zdaj bomo dodali kodo jQuery v oznake skripta .

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

Shranite in zaprite.

Končni videz

Takole izgleda naša galerija, kajne lepa.

Zadnje besede

Če je najboljši učinek animacije mogoče doseči z nekaj manjšimi spremembami in ne z uporabo privzete animacije v galeriji za boljšo uporabniško izkušnjo, je pametno narediti tako majhno stvar. Skozi današnjo vadnico ste videli, kako smo ustvarili čudovite, očarljive galerijske animacije z vgrajenim sistemom Divi in ​​nekaj svetlobne kode. Če vam je ta vadnica všeč, jo delite s prijatelji Divi Lover.