Cara Menambahkan Efek Ken Burns Hover ke Gambar, Modul, dan Baris di Divi

Efek Ken Burns telah ada selama beberapa waktu. Efeknya dipopulerkan oleh Dokumenter Amerika, Ken Burns, saat ia menggunakan kombinasi teknik panning dan zooming untuk menghidupkan gambar dalam filmnya. Dalam desain web, Efek Ken Burns telah terbukti menjadi teknik desain populer untuk menghidupkan gambar latar.

Efek Ken Burns juga dapat digunakan sebagai efek melayang untuk gambar. Tentunya Anda pernah melihat ini digunakan sebelumnya. Dalam upaya menghidupkan gambar, desainer web menambahkan efek hover ke gambar yang menyebabkan gambar diperbesar, dipindahkan, dan diputar.

Dengan merilis efek Transform ke Divi Builder, menghadirkan efek hover ken burn ke gambar Anda tidak pernah semudah ini. Opsi transformasi ini memungkinkan Anda untuk menskalakan (memperbesar), memindahkan (atau menggeser), dan memutar gambar sesuka Anda. Dan karena Anda dapat menerapkan transformasi ini ke keadaan gambar melayang, kemungkinan desainnya tidak terbatas.

Dalam tutorial ini, saya akan menunjukkan kepada Anda betapa mudahnya membuat efek hover ken burn yang benar-benar unik ke gambar dan baris menggunakan Divi Builder.

Mari kita mulai.

Sneak Peek

Berikut ini adalah cuplikan efek hover ken burn yang dapat dengan mudah dilakukan dengan opsi transformasi Divi.

Konsep Dasar Dijelaskan

Konsep dasar untuk membuat efek melayang Ken Burns melibatkan penggunaan opsi transformasi baru Divi untuk menskalakan, memposisikan, dan memutar gambar saat mengarahkan kursor ke gambar itu. Anda dapat meningkatkan properti transformasi skala dengan persentase tertentu untuk membuat gambar tumbuh lebih besar saat mengarahkan kursor. Anda dapat menggunakan properti translate transform untuk memindahkan gambar di sepanjang sumbu x dan y. Dan Anda dapat memutar gambar menggunakan properti rotate transform dengan menetapkan nilai derajat tertentu (dalam hal ini nilai derajat untuk rotasi pada sumbu x). Terakhir, Anda dapat mengontrol durasi transisi (kecepatan) dan kurva kecepatan untuk mengontrol kecepatan aliran efek hover ken burn. Tiga properti transformasi dan properti transisi bekerja sama untuk menciptakan efek melayang ken burn yang menghidupkan foto Anda.

Anda dapat dengan mudah menyesuaikan properti transformasi dan properti transisi menggunakan pengaturan bawaan yang disediakan Divi. Namun, kunci untuk membuat efek ini bekerja melibatkan baris css sederhana (overflow:hidden) yang perlu diterapkan ke kolom yang berisi gambar Anda. Karena Anda akan menskalakan, memindahkan, dan memutar gambar, Anda ingin luapan gambar disembunyikan di luar kolom yang memuatnya.

Setelah Anda memiliki ide dasar dan fungsionalitasnya, sungguh menakjubkan betapa mudahnya memposisikan gambar persis seperti yang Anda inginkan menggunakan opsi transformasi Divi.

Unduh Contoh Efek Ken Burns Hover GRATIS

Untuk mendapatkan Contoh Efek Ken Burns Hover gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. 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.

Setelah Anda mengunduh file zip, unzip folder tersebut. Selanjutnya, impor tata letak .json menggunakan fitur Portabilitas Divi Builder. Atau Anda cukup menyeret file ke Divi Builder menggunakan fungsionalitas Drag and Drop Divi. Itu dia!

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!

Memulai dengan Halaman Baru

Hal pertama yang perlu Anda lakukan adalah membuat halaman baru. Kemudian beri Anda judul halaman dan gunakan Divi Builder di ujung depan. Kemudian pilih opsi untuk "Membangun dari Awal".

Menambahkan Efek Ken Burns ke Gambar dalam Baris Satu Kolom

Untuk contoh dasar pertama ini, saya akan menunjukkan cara menambahkan efek hover ken burn ke satu gambar dalam satu baris kolom. Saya akan menggunakan opsi skala, terjemahkan, dan putar transformasi untuk mencapai efek ini.

Pertama, buat bagian baru dengan baris satu kolom. Kemudian tambahkan modul gambar ke baris.

Menyembunyikan Luapan Kolom

Sebelum kita mulai memperbarui pengaturan Gambar, buka pengaturan baris dan klik Tab Lanjutan. Kemudian tambahkan CSS khusus berikut ke Elemen Utama Kolom:

overflow: hidden;

Ini akan menjaga gambar agar tidak meluas (atau meluap) di luar wadah kolom setiap kali gambar diskalakan ke ukuran yang lebih besar saat mengarahkan kursor. Jika Anda tidak menambahkan ini, gambar akan keluar dari wadah dan menyembunyikan elemen halaman lainnya. Secara teknis, Anda dapat menambahkan css ini ke elemen utama baris alih-alih kolom, tetapi Anda juga harus menghilangkan bantalan baris khusus.

Simpan pengaturan baris.

Menambahkan Gambar Anda

Sekarang kita dapat menambahkan gambar ke modul gambar. Buka pengaturan modul gambar dan tambahkan gambar.

Pastikan gambar jauh lebih besar dari kolom. Ini penting agar gambar tidak terlihat buram saat Anda menskalakan gambar ke ukuran yang lebih besar saat mengarahkan kursor. Jika Anda menggunakan pengaturan default baris satu kolom, lebar maksimum kolom adalah 1080 piksel. Jadi, saya menggunakan gambar dengan lebar sekitar 1500px dan tinggi 900px.

Penting: Sebagai aturan praktis, semakin besar gambar, semakin banyak ruang yang Anda perlukan untuk menskalakan, memindahkan, dan memutar gambar tanpa kehilangan kualitas gambar.

Menambahkan Efek Transform Hover

Sekarang setelah kita memiliki gambar kita, saatnya untuk menggunakan opsi transformasi tersebut untuk membuat efek hover Ken Burns. Lompat ke tab desain untuk membuka opsi Transform. Aktifkan efek hover dan pilih tab hover. Sekarang penyesuaian efek transformasi apa pun hanya akan berlaku untuk status melayang dari modul gambar. Kemudian di bawah tab Transform Scale, perbarui yang berikut ini:

Transform Skala sumbu x (arahkan kursor): 136%
Transform Skala sumbu y (arahkan kursor): 136%

Kemudian klik tab Transform Translate dan perbarui yang berikut:

Transformasi Terjemahkan sumbu x (arahkan kursor): 3%
Transformasi Terjemahkan sumbu y (arahkan kursor): 9%

Ini memindahkan gambar ke kiri sebesar 3% dan ke bawah sebesar 9%. Untuk gambar khusus ini, saya menggunakan dan efek yang akan memperbesar dan membawa pasangan ke tengah kolom viewport.

Secara default, nilai panjang terjemahan akan dalam piksel (bukan persentase). Anda dapat menggunakan piksel untuk memindahkan gambar, tetapi saya menemukan bahwa menggunakan persentase membuat pemosisian lebih responsif.

Selanjutnya klik tab Transform Rotate dan perbarui yang berikut ini:

Transform Putar sumbu x (arahkan kursor): 6deg

Perbarui Opsi Transisi

Terakhir, kita perlu memperbarui durasi transisi (berapa lama waktu yang dibutuhkan untuk menyelesaikan efek transform hover) dan kurva kecepatan (fungsi pengaturan waktu yang memungkinkan transisi mengubah kecepatan selama durasinya). Untuk contoh ini, saya ingin transisi memakan waktu lebih lama untuk efek Ken Burns yang lebih dramatis (dan klasik) pada hover. Untuk melakukannya, buka tab lanjutan dan perbarui opsi transisi sebagai berikut:

Durasi Transisi: 2000ms (atau 2 detik)
Kurva Kecepatan Transisi: Linear (ini memastikan kecepatan transisi tidak berubah dalam durasi)

Hasil Akhir

Sekarang mari kita lihat hasil akhirnya. Jangan disesatkan oleh choppiness dari gif di bawah ini. Transisinya sangat mulus di situs langsung.

Menambahkan Efek Ken Burns Hover ke beberapa gambar dalam Baris Tiga Kolom

Jika Anda ingin menambahkan efek hover ken burn ke gambar di beberapa kolom, proses yang sama berlaku. Hal utama yang perlu Anda lakukan adalah memastikan dan menambahkan potongan css “overflow:hidden” ke setiap kolom yang berisi gambar Anda.

Dengan menggunakan contoh sebelumnya di atas, ubah struktur kolom baris menjadi tata letak tiga kolom.

Selanjutnya, perbarui pengaturan baris dengan cuplikan CSS khusus yang akan menyembunyikan luapan setiap kolom.

Kolom 1 Elemen Utama CSS:

overflow:hidden;

Kolom 2 Elemen Utama CSS:

overflow:hidden;

Kolom 3 Elemen Utama CSS:

overflow:hidden;

Selanjutnya copy modul gambar dan paste ke kolom 2 dan kolom 3.

Itu dia. Berikut adalah hasil akhirnya.

Karena desain ini lebih khas dari tata letak kisi galeri, Anda mungkin ingin sedikit mempercepat durasi transisi untuk mempertajam animasi melayang. Anda dapat melakukannya dengan mudah menggunakan fitur multiselect Divi. Tahan ctrl atau cmd dan pilih semua modul gambar. Kemudian klik ikon roda gigi pengaturan pada salah satu gambar untuk membuka modal Pengaturan Elemen.

Sekarang setiap pembaruan yang Anda buat di pengaturan elemen akan diterapkan ke semua gambar sekaligus. Perbarui opsi transisi dalam pengaturan elemen sebagai berikut:

Durasi Transisi: 500ms

Berikut adalah durasi transisi baru yang berlaku.

Menambahkan Efek Ken Burns Hover ke Modul Apa Pun dengan Gambar Latar Belakang

Efek hover Ken Burns juga dapat digunakan untuk modul selain Modul Gambar. Ini berfungsi dengan baik jika Anda ingin mengubah teks atau ikon bersama dengan gambar latar belakang modul.

Berikut adalah cara menambahkan efek Ken Burns ke Modul Teks.

Pertama buat bagian reguler baru dengan baris satu kolom. Kemudian tambahkan modul teks ke baris.

Perbarui modul teks dengan konten berikut:

<h1>We're Engaged!</h1>

Kemudian tambahkan gambar latar belakang ke modul. Ingatlah untuk menambahkan gambar yang cukup besar untuk menyisakan ruang untuk penskalaan dan memindahkan gambar saat melayang.

Dan kemudian perbarui opsi desain heading sebagai berikut:

Font Judul: Prata
Ukuran Teks Judul: 6vw
Padding Kustom: 10vw atas, 10vw bawah, 3vw kiri

Durasi Transisi: 5000ms

Sekarang tambahkan Pengaturan Transform berikut ke modul teks.

Transform Skala sumbu x (arahkan): 118%
Transform Skala sumbu y (arahkan kursor): 118%

Transformasi Terjemahkan sumbu x (arahkan kursor): 6%
Transformasi Terjemahkan sumbu y (arahkan kursor): 6%

Sekarang, perbarui Pengaturan Baris dengan CSS khusus berikut untuk Kolom.

CSS Elemen Utama Kolom:

overflow:hidden;

Sekarang lihat hasilnya.

Perhatikan bagaimana teks dan gambar latar belakang akan berubah bersama saat mengarahkan kursor.

Menggabungkan Efek Hover Ken Burns dengan Efek Hover Tambahan

Anda juga dapat menggabungkan Efek Ken Burns Hover yang diterapkan ke modul dengan efek tambahan untuk kreativitas yang lebih besar lagi.

Menggabungkan Efek Ken Burns Hover dengan Efek Filter

Jika Anda lupa, efek filter adalah cara yang bagus untuk menambahkan gaya kreatif ke modul Anda, terutama saat mengarahkan kursor. Dan Anda dapat menggabungkan efek filter ini dengan efek transformasi untuk beberapa transisi hover yang cukup unik.

Untuk menunjukkannya, mari gunakan contoh di atas yang menambahkan efek ken burn ke modul teks. Karena modul teks sudah memiliki efek transform hover, mari tambahkan efek filter tambahan untuk mengubah gambar dari hitam putih menjadi berwarna.

Buka pengaturan modul teks dan perbarui opsi filter berikut:

Saturasi (default): 0%
Saturasi (arahkan kursor): 100%

Transisi ini akan mengatur modul teks ke saturasi 0% secara default yang akan menghilangkan warna sehingga menjadi hitam dan putih. Setting in back to 100% pada hover akan menambah warna asli gambar kembali.

Berikut adalah efek akhir dari efek filter yang dipadukan dengan efek hover ken burn.

Menggabungkan Ken Burns Hover Effect dengan Row Transform Effects

Untuk contoh ini, saya akan menunjukkan cara menggabungkan efek hover ken burn dengan efek transformasi tambahan yang ditambahkan ke baris. Idenya adalah menggunakan efek transformasi untuk menskalakan dan memutar baris pada status defaultnya dan kemudian mengembalikan desain aslinya saat melayang.

CATATAN: Teknik ini benar-benar hanya akan bekerja dengan baik untuk baris satu kolom dengan satu modul. Ini karena pengunjung harus mengarahkan kursor ke modul dan baris secara bersamaan. Oleh karena itu modul perlu mengambil tinggi dan lebar penuh baris. Modul atau spasi tambahan akan merusak status hover dan menyebabkan masalah.

Untuk melakukan ini, kita akan tetap menggunakan desain modul teks kita saat ini yang sudah menggabungkan efek hover ken burn dengan efek filter tambahan. Jadi ini sebenarnya adalah efek triple hover!

Buka pengaturan baris yang berisi modul teks. Kemudian perbarui yang berikut ini:

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

Ini untuk memastikan tidak ada spasi tambahan antara modul teks dan baris.

Selanjutnya kita akan menambahkan bayangan kotak ke baris sebagai berikut:

Bayangan Kotak: lihat tangkapan layar
Kekuatan Kabur Bayangan Kotak: 36px
Warna Bayangan: rgba (0,0,0,0.17)

Sekarang tambahkan efek Transform berikut:

Skala Transformasi sumbu x (default): 70%
Transform Skala sumbu x (arahkan): 100%
Transform Skala sumbu y (default): 70%
Transform Skala sumbu y (arahkan kursor): 100%

Transformasi Putar sumbu y (default): 19 derajat
Transform Putar sumbu y (arahkan kursor): 0deg
Transform Putar sumbu z (default): 23 derajat
Transform Putar sumbu z (arahkan kursor): 0deg

Sekarang mari kita lihat hasil akhirnya.

Menambahkan Efek Ken Burns Hover ke Seluruh Baris Konten

Jika Anda bertanya-tanya, efek hover Ken Burns juga dapat digunakan untuk menghidupkan seluruh baris konten saat melayang. Ini tidak akan terlalu praktis untuk baris dengan banyak konten karena akan membingungkan atau mengganggu pengunjung. Tetapi untuk hal-hal seperti header, ini bisa menjadi teknik desain yang berguna. Triknya adalah menambahkan cuplikan CSS khusus “overflow:hidden” ke bagian tersebut. Kemudian Anda dapat menambahkan efek transformasi ke baris.

Pikiran Akhir

Meskipun Efek Ken Burns telah ada untuk sementara waktu, Anda mungkin masih merasa berguna untuk membuat beberapa efek hover yang cukup unik untuk gambar dan modul Anda di Divi. Triknya adalah mengetahui cara menggunakan opsi Divi Transform yang ternyata sangat intuitif. Contoh yang diberikan dalam tutorial ini dimaksudkan untuk memperkenalkan konsep dan semoga memberikan sedikit inspirasi untuk penggunaan Anda sendiri. Ketika Anda memikirkan semua cara Anda menggabungkan opsi transformasi dengan semua opsi gaya lain yang tersedia di Divi, banyak ide mulai bermunculan.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!