Divi resim galerisi , bir web sitesi içinde tamamen işlevsel galeriler oluşturmak için kullanışlı bir modüldür. Bir moda tutkunu veya fotoğrafçıysanız, projelerinizi sergilemek için web sitenizde bir galeriye ihtiyacınız olabilir. Divi'nin resim galerisine olağanüstü bir animasyon efekti getirmek için gerekli tüm dahili donanıma sahip olup olmadığını bilmiyor olabilirsiniz. Bugün Divi oluşturucu ile anime.js kullanarak dalgalanma animasyonu getirmeye ve yaratıcı bir resim galerisi animasyonu görmeye çalışacağız. Daha fazla vakit kaybetmeden başlayalım.
Ön izleme
Tam öğreticiyi yaptıktan sonra galerimiz böyle görünecek.
Divi Resim Galerisine Animasyon Ekleme
Bölüm 1: Galeri Sayfası Düzen Tasarımı
Bölüm
İlk olarak başlangıç bölümü için ayarları açacağız ve bahsi geçen değişikliği yapacağız.
- Arka Plan Gradyanı Sol Renk: #15d6c2
- Arka Plan Gradyanı Sağ Renk: #000000
- Başlangıç Konumu: %50
- Bitiş Konumu: %25
Tasarım sekmesindeki dolgu ayarlarını güncelleyeceğiz.
Harika Web Siteleri Oluşturun
En iyi ücretsiz sayfa oluşturucu Elementor ile
Şimdi başla- Dolgu: 0 piksel üst, 0 piksel alt, 0 piksel sol, 0 piksel sağ
Ardından, gelişmiş sekmesindeki görünürlükten taşma ayarlarını güncelleyeceğiz.
- Yatay Taşma: Gizli
- Dikey Taşma: Gizli
1. Sıra Ekleme
Sayfa başlığımızı tutacak tek sütunlu bir satır ekleyeceğiz.
Ardından satır ayarlarından dolguyu güncelleyelim:
- Dolgu: 15 piksel üst, 15 piksel alt
Metin Modülü Ekle
Bir sonraki adım, satıra bir metin modülü eklemektir. Bu modül sayfa başlığı görevi görecektir.
Şimdi istediğiniz içeriği ekleyin ve resimde gösterilen menüden Heading 1'i seçin.
Ardından tasarım bölümüne geçeceğiz ve Başlık için aşağıdaki ayarları güncelleyeceğiz:
- 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)
2. Sıra Ekleme
Aynı bölüme bir satır daha ekleyeceğiz. Galeri modülümüz olarak çalışacak.
Satır ayarlarından satıra siyah bir arka plan rengi ekleyin.
- Arka Plan Rengi: #000000
Tasarım sekmesinde birçok güncelleme yapmamız gerekiyor. bu yüzden dikkatli takip edin. İlk olarak, boyut ayarlarına gidin.
- Özel Oluk Genişliğini Kullan: EVET
- Oluk Genişliği: 1
- Genişlik: %95
- Minimum Yükseklik: 80vh
Şimdi, satıra biraz dolgu ekleyin.
- Dolgu: 0 piksel üst, 0 piksel alt
Biraz kutu gölgesi eklemenin zamanı geldi.
- 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 Tasarımı
Galeri modülünü tasarımımıza eklemenin zamanı geldi.
Galeri modülünün içerik sekmesinden. En az 25 resim ekleyin. Bu, görüntülerin olağanüstü bir animasyon efektine sahip olması için oldukça iyi bir miktardır.
Resimleri yükledikten sonra aşağıdaki değişiklikleri yapın:
- Görüntü Sayısı: 25
- Başlığı ve Altyazıyı Göster: HAYIR
- Sayfalandırmayı Göster: EVET
Bindirme ve Sayfalandırma Tasarımı
Tasarım sekmesinden bindirme ayarını güncelleyin:
- Yer Paylaşımı Simge Rengi: #ffffff
- Bindirme Arka Plan Rengi: rgba(22,215,195,0.55)
- Yer Paylaşımı Simgesi: artı simgesi (ekran görüntüsüne bakın)
Sayfalandırma ayarlarının zamanı geldi.
- 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
Şimdi galeri için bazı gelişmiş stilizasyon yapacağız. İ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 (Mobil)
animation: fadeLeft 0s !important;
background: #000000;
padding: 5px;
width: 50% !important;
margin: 0 !important;
clear: none !important
Aşağıdaki CSS kodunu galeri sayfalandırma kutusuna ekleyin.
border-top: 0px !important;
padding-top: 20px; Ayrıca, bu CSS kodunu sayfalandırma etkin sayfa kutusuna yerleştirin.
color: #15D6C2 !important;
font-weight: bold;
Şimdi kaydetmeden önce galeri modülüne bir CSS sınıfı ekleyin.
- CSS Sınıfı: et-anime-galeri
Bölüm 3: JQuery ve Anime.js ile Animasyon Etkisi Ekleme
Tasarımımızla işimiz bitti. Daha çekici hale getirmek için basit kodlama eklemenin zamanı geldi. Bu yüzden galeri modülünün altına bir kod modülü ekleyeceğiz.
CSS
Şimdi aşağıdaki CSS kodunu Stil etiketlerinin içindeki içerik kutusunun içine 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ığı
Anime.js kitaplığını tasarımımıza eklemek için CSS kodunun altına bu kaynağı Komut Dosyası etiketlerine ekleyin.
src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"
jQuery Kodu
Şimdi jQuery kodunu script etiketlerinin içine ekleyeceğiz.
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" }
),
});
}
});
});Kaydedin ve kapatın.
Son Bakış
Galerimiz böyle görünüyor, çok güzel değil mi?
Son sözler
En iyi animasyon efekti, ziyaretçilere daha iyi bir kullanıcı deneyimi sunmak için galerideki varsayılan animasyonu kullanmak yerine birkaç küçük değişiklikle elde edilebiliyorsa, böyle küçük bir şey yapmak akıllıca olacaktır. Bugünkü eğitimde, Divi'nin yerleşik sistemi ve bazı ışık kodları ile nasıl güzel, büyüleyici galeri animasyonları oluşturduğumuzu gördünüz. Bu öğreticiyi beğendiyseniz, lütfen Divi Lover arkadaşlarınızla paylaşın.
