Cara Menambahkan Animasi Grid Staggering ke Galeri Gambar di Divi

Modul galeri gambar Divi terus menjadi alat yang nyaman dan berguna untuk membuat galeri gambar yang menakjubkan untuk situs Anda. Pengaturan desain bawaan memungkinkan Anda mendapatkan semua kebutuhan dan banyak lagi. Namun, dalam tutorial ini, kita akan membawa desain galeri gambar ke level baru dengan efek animasi unik yang mengejutkan. Menggunakan kombinasi pilihan desain bawaan Divi anime.js, Animasi mengejutkan ini menyerupai jenis efek riak yang mengungkap setiap gambar dalam galeri satu demi satu dengan animasi desain yang halus. Ini akan sempurna bagi Anda yang mencari presentasi unik galeri Anda untuk pengunjung dan transisi yang mengesankan saat menavigasi melalui setiap halaman galeri.

Mari kita mulai!

Sneak Peek

Berikut ini sekilas desain yang akan kita buat dalam tutorial ini.

Dan ini adalah codepen yang menunjukkan konsep yang sama.

Unduh Tata Letaknya GRATIS

Untuk mendapatkan desain dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Untuk mengimpor tata letak bagian ke Perpustakaan Divi Anda, navigasikan ke Perpustakaan Divi.

Klik tombol Impor.

Di popup portabilitas, pilih tab impor dan pilih file unduhan dari komputer Anda.

Kemudian klik tombol impor.

Setelah selesai, tata letak bagian akan tersedia di Divi Builder.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda perlu melakukan hal berikut:

1. Jika belum, instal dan aktifkan Tema Divi.
2. Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
3. Pilih opsi "Bangun Dari Awal".

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

Cara Menambahkan Animasi yang Mengejutkan ke Galeri Gambar Divi

Bagian 1: Mendesain Tata Letak Halaman Galeri

Bagian

Untuk memulai, buka pengaturan untuk bagian yang ada dan berikan gradien latar belakang sebagai berikut:

• Warna Kiri Gradien Latar Belakang: #d915b5
• Warna Kanan Gradien Latar Belakang: #000000
• Posisi Awal: 50%
• Posisi Akhir: 25%

Di bawah tab desain, perbarui padding:

• Padding: 0px atas, 0px bawah, 0px kiri, 0px kanan

Di bawah tab lanjutan, perbarui yang berikut ini:

• Luapan Horisontal: Tersembunyi
• Overflow Vertikal: Tersembunyi

Baris untuk Judul Halaman

Di dalam bagian, tambahkan baris satu kolom. Ini akan menahan judul halaman kita.

Buka pengaturan baris dan perbarui padding:

• Padding: atas 15px, bawah 15px

Modul Teks Judul

Untuk membuat judul halaman, tambahkan modul teks ke baris/kolom.

Kemudian perbarui konten isi dengan judul H1 berikut:

<h1>Gallery</h1>

Di bawah pengaturan desain teks, perbarui yang berikut ini:

• Font Judul: Poppins
• Perataan Teks Judul: tengah
• Warna Teks Judul: #ffffff
• Ukuran Teks Judul: 100px (desktop), 80px (tablet), 60px (ponsel)

Baris untuk Modul Galeri

Di bagian yang sama, buat baris satu kolom baru yang akan menampung modul galeri.

Buka pengaturan baris dan berikan latar belakang hitam:

• Warna Latar Belakang: #000000

Di bawah pengaturan desain, perbarui yang berikut ini:

• Gunakan Lebar Talang Kustom: YA
• Lebar Talang: 1
• Lebar: 95%
• Tinggi Min: 80vh
• Padding: 0px atas, 0px bawah
• Bayangan Kotak: lihat tangkapan layar
• Posisi Vertikal Bayangan Kotak: 0px
• Posisi Horizontal Bayangan Kotak: 0px
• Kekuatan Penyebaran Bayangan Kotak: 70px
• Warna Bayangan: #000000

Bagian 2: Merancang Modul Galeri

Terakhir, kita siap untuk menambahkan dan mendesain modul galeri. Untuk membuat galeri, tambahkan modul galeri baru ke baris.

Gambar

Di bawah tab konten pengaturan Galeri, tambahkan gambar yang ingin Anda gunakan untuk galeri. Untuk contoh ini, kita akan menambahkan 65 gambar (atau setidaknya lebih dari 25). Ini akan memberi kami sejumlah item galeri yang bagus untuk menampilkan efek animasi dan pagination kami yang mengejutkan.

Setelah gambar diunggah ke galeri, perbarui yang berikut:

• Jumlah Gambar: 25
• Tampilkan Judul dan Keterangan: TIDAK
• Tampilkan Pagination: YA

CATATAN: Menyetel jumlah gambar ke "25" menentukan jumlah gambar yang akan ditampilkan per halaman saat mengklik tautan pagination. Animasi grid mengejutkan yang akan kita tambahkan dengan kode kustom didasarkan pada galeri gambar yang memiliki 5 baris 5 gambar (25 gambar) per halaman. Untuk hasil terbaik, pastikan Anda memiliki setidaknya 25 gambar dan jumlah gambar diatur ke 25.

Desain Overlay dan Pagination

Di bawah tab desain, perbarui desain overlay:

• Warna Ikon Hamparan: #ffffff
• Warna Latar Belakang Hamparan: rgba(217,21,181,0.55)
• Ikon Hamparan: ikon plus (lihat tangkapan layar)

• Perataan Teks Pagination: Tengah
• Ukuran Teks Pagination: 2em
• Tinggi Garis Pagination: 2em
• Padding: 10px atas, 10px bawah, 5px kiri, 5px kanan

Gaya Tingkat Lanjut

Selanjutnya, kita akan menambahkan beberapa gaya lanjutan ke modul galeri. Alasan utama untuk melakukan ini adalah untuk mengontrol jumlah gambar yang ditampilkan per baris pada perangkat yang berbeda.

Pertama, mari tambahkan beberapa CSS ke Item Galeri sebagai berikut:

CSS Item Galeri (desktop)

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

CSS Item Galeri (tablet)

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

CSS Item Galeri (telepon)

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

Perhatikan lebar setiap item galeri berubah pada setiap perangkat. Lebar 20% di desktop akan membuat 5 gambar per baris. Lebar 25% pada tablet akan membuat 4 gambar per baris. Dan lebar 50% di ponsel akan membuat 2 gambar per baris.

Selanjutnya, keluarkan batas pagination tetapi tambahkan CSS berikut ke kotak Gallery Pagination:

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

Terakhir, tambahkan warna khusus dan bobot font ke tautan pagination yang aktif:

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

Sebelum kita menyimpannya, pastikan untuk menambahkan Kelas CSS berikut ke Modul Galeri:

• Kelas CSS: et-anime-gallery

Bagian 3: Menambahkan Efek Animasi yang Mengejutkan ke Galeri dengan JQuery dan Anime.js

Sekarang setelah desain selesai, kami memiliki tata letak galeri gambar yang sederhana dan profesional. Yang perlu kita lakukan adalah menambahkan kode yang diperlukan untuk membuat animasi yang mengejutkan di galeri gambar.

Untuk melakukan ini, tambahkan modul kode di bawah modul galeri.

CSS

Di kotak konten kode, tempel CSS berikut memastikan untuk membungkus CSS dalam tag gaya yang diperlukan:

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

Perpustakaan Anime.js

Di bawah tag gaya akhir, tempel src berikut dengan tag skrip untuk memanggil perpustakaan anime.js sehingga kita dapat menggunakannya untuk JavaScript/Jquery di bawahnya.

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

Scriptnya akan terlihat seperti ini…

JQuery

Di bawah skrip yang memanggil perpustakaan anime.js, rekatkan JQuery berikut dan bungkus dengan tag skrip yang diperlukan.

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

Hasil Akhir

Memperbarui Galeri dan Kode

Ada beberapa tip yang perlu diingat setiap kali Anda ingin membuat perubahan pada galeri dan efek animasi agar sesuai dengan situs Anda sendiri. Pertama, jika Anda ingin mengubah jumlah gambar galeri menjadi sesuatu selain 25, Anda perlu memperbarui kode untuk mencerminkan nilai baru tersebut. Misalnya, jika Anda mengubahnya menjadi 20, Anda juga perlu mengubah angka dalam variabel berikut:

var fromNum = pageNum*25-25;

untuk ini…

var fromNum = pageNum*20-20;

Anda mungkin juga perlu memperbarui nilai kisi properti penundaan pada kedua animasi. Misalnya, jika Anda hanya memiliki 20 gambar per halaman di desktop, Anda hanya akan memiliki 4 baris 5. Oleh karena itu, Anda perlu mengubah nilai berikut:

grid: [5, 5]

untuk ini…

grid: [4, 5]

Anda juga dapat mengubah nilai properti animasi sesuai kebutuhan. Misalnya, jika Anda ingin mengubah warna animasi latar belakang item galeri, Anda dapat memperbarui yang berikut ini:

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

untuk ini…

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

Ini akan mengubah warna latar belakang merah muda menjadi putih selama animasi.

Pikiran Akhir

Setelah semua desain selesai menggunakan Divi builder, menambahkan animasi yang menakjubkan ke galeri gambar Anda bisa menjadi cara yang bagus untuk membawa desain ke level berikutnya. Kunci dari animasi ini adalah memanfaatkan kekuatan perpustakaan anime.js untuk menargetkan gambar dan latar belakang untuk melakukan beberapa animasi. Jangan ragu untuk mempelajari lebih lanjut tentang grid mengejutkan dengan Anime.js di situs web mereka. Jangan ragu untuk menyesuaikan properti dan nilai kode untuk menambahkan suar Anda sendiri ke desain.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!