Divi'deki Bir Resim Galerisine Izgara Şaşırtıcı Animasyonu Nasıl Eklenir

Divi'nin resim galerisi modülü, siteniz için çarpıcı resim galerileri oluşturmak için kullanışlı ve kullanışlı bir araç olmaya devam ediyor. Yerleşik tasarım ayarları, tüm gereksinimleri ve daha fazlasını elde etmenizi sağlar. Ancak bu eğitimde, benzersiz bir şaşırtıcı animasyon efekti ile resim galerisi tasarımını yeni bir düzeye taşıyacağız. Divi'nin yerleşik tasarım seçenekleri anime.js'nin bir kombinasyonunu kullanan bu şaşırtıcı animasyon, galerideki her bir görüntüyü pürüzsüz bir tasarım animasyonuyla birbiri ardına ortaya çıkaran bir tür dalgalanma efektine benzer. Bu, ziyaretçiler için galerinizin benzersiz bir sunumunu ve galerinin her sayfasında gezinirken etkileyici bir geçiş arayanlarınız için mükemmel olacaktır.

Başlayalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.

Ve işte aynı konsepti gösteren bir kod kalemi.

Düzeni ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.

İçe Aktar düğmesini tıklayın.

Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.

Ardından içe aktar düğmesini tıklayın.

Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.

Hadi öğreticiye geçelim, olur mu?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “Sıfırdan Oluştur” seçeneğini seçin.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Divi Resim Galerisine Şaşırtıcı Animasyon Nasıl Eklenir

Bölüm 1: Galeri Sayfası Düzenini Tasarlama

Bölüm

Başlamak için, mevcut bölümün ayarlarını açın ve ona aşağıdaki gibi bir arka plan gradyanı verin:

• Arka Plan Gradyanı Sol Renk: #d915b5
• Arka Plan Gradyanı Sağ Renk: #000000
• Başlangıç ​​Konumu: %50
• Bitiş Konumu: %25

Tasarım sekmesi altında dolguyu güncelleyin:

• Dolgu: 0 piksel üst, 0 piksel alt, 0 piksel sol, 0 piksel sağ

Gelişmiş sekmesi altında aşağıdakileri güncelleyin:

• Yatay Taşma: Gizli
• Dikey Taşma: Gizli

Sayfa Başlığı için Satır

Bölümün içine tek sütunlu bir satır ekleyin. Bu sayfa başlığımızı tutacaktır.

Satır ayarlarını açın ve dolguyu güncelleyin:

• Dolgu: 15 piksel üst, 15 piksel alt

Başlık Metni Modülü

Sayfa başlığını oluşturmak için satıra/sütuna bir metin modülü ekleyin.

Ardından gövde içeriğini aşağıdaki H1 başlığıyla güncelleyin:

<h1>Gallery</h1>

Metin tasarımı ayarları altında aşağıdakileri güncelleyin:

• Başlık Yazı Tipi: Poppins
• Başlık Metni Hizalama: orta
• Başlık Metni Rengi: #ffffff
• Başlık Metni Boyutu: 100px (masaüstü), 80px (tablet), 60px (telefon)

Galeri Modülü Satırı

Aynı bölümde, galeri modülünü tutacak yeni bir tek sütunlu satır oluşturun.

Satır ayarlarını açın ve siyah bir arka plan verin:

• Arka Plan Rengi: #000000

Tasarım ayarları altında aşağıdakileri güncelleyin:

• Özel Oluk Genişliğini Kullan: EVET
• Oluk Genişliği: 1
• Genişlik: %95
• Minimum Yükseklik: 80vh
• Dolgu: 0 piksel üst, 0 piksel alt
• Kutu Gölgesi: ekran görüntüsüne bakın
• Kutu Gölge Dikey Konumu: 0px
• Kutu Gölgesi Yatay Konumu: 0px
• Kutu Gölge Yayılma Gücü: 70px
• Gölge Rengi: #000000

Bölüm 2: Galeri Modülünü Tasarlama

Son olarak galeri modülünü ekleyip tasarlamaya hazırız. Galeriyi oluşturmak için satıra yeni bir galeri modülü ekleyin.

Görüntüler

Galeri ayarlarının içerik sekmesi altında, galeri için kullanmak istediğiniz görselleri ekleyin. Bu örnek için 65 resim ekleyeceğiz (veya en az 25'in üzerinde). Bu bize şaşırtıcı animasyon efektimizi ve sayfa numaralandırmamızı sergilemek için çok sayıda galeri öğesi verecektir.

Resimler galeriye yüklendikten sonra aşağıdakileri güncelleyin:

• Görüntü Sayısı: 25
• Başlığı ve Altyazıyı Göster: HAYIR
• Sayfalandırmayı Göster: EVET

NOT: Resim sayısının “25” olarak ayarlanması, sayfalandırma bağlantılarına tıklandığında sayfa başına görüntülenecek resim sayısını tanımlar. Özel kodla ekleyeceğimiz şaşırtıcı ızgara animasyonu, sayfa başına 5 satır 5 resim (25 resim) içeren resim galerisine dayanmaktadır. En iyi sonuçlar için en az 25 resminiz olduğundan ve resim sayısının 25 olarak ayarlandığından emin olun.

Bindirme ve Sayfalandırma Tasarımı

Tasarım sekmesi altında kaplama tasarımını güncelleyin:

• Yer Paylaşımı Simge Rengi: #ffffff
• Bindirme Arka Plan Rengi: rgba(217,21,181,0.55)
• Yer Paylaşımı Simgesi: artı simgesi (ekran görüntüsüne bakın)

• Sayfalandırma Metni Hizalama: Merkez
• Sayfalandırma Metin Boyutu: 2em
• Sayfalandırma Satırı Yüksekliği: 2em
• Dolgu: 10 piksel üst, 10 piksel alt, 5 piksel sol, 5 piksel sağ

Gelişmiş Şekillendirme

Ardından, galeri modülüne bazı gelişmiş stiller ekleyeceğiz. Bunu yapmanın ana nedeni, farklı cihazlarda satır başına görüntülenen görüntü sayısını kontrol etmektir.

İlk olarak, Galeri Öğesine aşağıdaki gibi biraz CSS ekleyelim:

Galeri Öğesi CSS (masaüstü)

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

Galeri Öğesi CSS (tablet)

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

Galeri Öğesi CSS (telefon)

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

Her cihazda her galeri öğesinin genişliğinin değiştiğine dikkat edin. Masaüstündeki %20 genişlik, satır başına 5 görüntü oluşturacaktır. Tabletteki %25 genişlik, satır başına 4 görüntü oluşturacaktır. Ve telefondaki %50 genişlik, satır başına 2 resim oluşturacaktır.

Ardından, sayfalandırma kenarlığını çıkarın, ancak aşağıdaki CSS'yi Galeri Sayfalandırma kutusuna ekleyin:

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

Son olarak, etkin sayfalandırma bağlantısına özel bir renk ve yazı tipi ağırlığı ekleyin:

color: #d915b5 !important;
font-weight: bold;

Kaydetmeden önce, Galeri Modülüne aşağıdaki CSS Sınıfını eklediğinizden emin olun:

• CSS Sınıfı: et-anime-galeri

Bölüm 3: JQuery ve Anime.js ile Galeriye Şaşırtıcı Animasyon Etkisi Ekleme

Artık tasarım tamamlandığında, basit ve profesyonel bir resim galerisi düzenine sahibiz. Tek yapmamız gereken şaşırtıcı animasyonu oluşturmak için gerekli kodu resim galerisine eklemek.

Bunu yapmak için galeri modülünün altına bir kod modülü ekleyin.

CSS

Kod içeriği kutusuna, CSS'yi gerekli stil etiketlerine sardığınızdan emin olarak aşağıdaki CSS'yi yapıştırın:

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

Anime.js Kitaplığı

Bitiş stili etiketinin altına, anime.js kitaplığını çağırmak için aşağıdaki src'yi bir komut dosyası etiketiyle yapıştırın, böylece onu JavaScript/Jquery için kullanabiliriz.

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

Senaryo şöyle görünmeli…

JQuery

anime.js kitaplığını çağıran komut dosyasının altına aşağıdaki JQuery'yi yapıştırın ve gerekli komut dosyası etiketleriyle sarın.

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,
        opacity: [0, 1],
        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", "#d915b5", "#000"],
        direction: "normal",
        easing: "easeInOutSine",
        duration: 600,
        delay: anime.stagger(
          250,
          { grid: [5, 5], from: stagFrom },
          { start: "100" }
        ),
      });
    }
  });
});

Son sonuç

Galeri ve Kodu Güncelleme

Kendi sitenize uyacak şekilde galeri ve animasyon efektlerinde değişiklik yapmak istediğinizde aklınızda bulundurmanız gereken birkaç ipucu var. İlk olarak, galeri resim sayısını 25'ten farklı bir değerle değiştirmek istiyorsanız, kodu bu yeni değeri yansıtacak şekilde güncellemek isteyeceksiniz. Örneğin, 20 olarak değiştirirseniz, aşağıdaki değişkendeki sayıları da değiştirmeniz gerekecektir:

var fromNum = pageNum*25-25;

buna…

var fromNum = pageNum*20-20;

Her iki animasyonda da delay özelliğinin grid değerini güncellemeniz gerekebilir. Örneğin, masaüstünde sayfa başına yalnızca 20 resminiz varsa, yalnızca 4 satır 5'iniz olacaktır. Bu nedenle aşağıdaki değeri değiştirmeniz gerekecektir:

grid: [5, 5]

buna…

grid: [4, 5]

Ayrıca, animasyon özelliği değerlerini gerektiği gibi değiştirebilirsiniz. Örneğin, galeri öğesi arka plan animasyonunun renklerini değiştirmek isterseniz, aşağıdakileri güncelleyebilirsiniz:

background: ["#000", "#d915b5", "#000"]

buna…

background: ["#000", "#ffffff", "#000"]

Bu, animasyon sırasında pembe arka plan rengini beyaza çevirecektir.

Son düşünceler

Divi oluşturucu kullanılarak tüm tasarım tamamlandıktan sonra, resim galerinize şaşırtıcı animasyon eklemek, tasarımı bir sonraki seviyeye taşımak için harika bir yol olabilir. Animasyonun anahtarı, birden fazla animasyon gerçekleştirmek için görüntüleri ve arka planları hedeflemek için anime.js kitaplığının gücünden yararlanmaktır. Web sitelerinde Anime.js ile ızgara şaşırtma hakkında daha fazla bilgi edinmekten çekinmeyin. Tasarıma kendi parıltınızı eklemek için kodun özelliklerini ve değerlerini ayarlamaktan çekinmeyin.

Yorumlarda sizden haber bekliyorum.

Şerefe!