Cara Membuat Animasi Tumpang Tindih pada Penundaan dengan Divi

Diterbitkan: 2019-04-12

Sebagian besar keberhasilan situs web Anda bergantung pada apakah Anda dapat membuat pengunjung terkesan atau tidak. Tidak hanya dengan produk atau layanan Anda, tetapi juga dengan cara Anda berkomunikasi dan seberapa baik desain situs web Anda. Karena jujur saja, situs web sering kali merupakan kesan pertama. Dan mirip dengan jenis kesan pertama lainnya, Anda ingin meninggalkan kesan yang baik.

Sekarang, jika Anda mencari cara unik untuk menonjolkan beberapa konten Anda, membuat animasi tumpang tindih yang halus mungkin adalah yang Anda cari. Animasi tumpang tindih yang halus ini seperti tayangan slide untuk pengunjung Anda. Mereka tidak perlu menggulir atau mengklik apa pun, konten hanya muncul dengan cara yang elegan.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

animasi yang tumpang tindih

Seluler

animasi yang tumpang tindih

Mendekati

Kita akan memulai dengan menambahkan semua elemen desain yang kita butuhkan dalam urutan vertikal, tanpa tumpang tindih
Saat kami menambahkan semua elemen desain, kami juga akan menambahkan animasi khusus dengan penundaan animasi tertentu
Penundaan animasi ini hanya akan masuk akal setelah Anda menyelesaikan bagian terakhir dari tutorial yang berfokus pada tumpang tindih
Bagian penting dari tutorial ini adalah menggunakan Modul Pembagi berbentuk dengan warna latar belakang yang sama dengan bagian untuk membuat konten baris 'menghilang' pada penundaan
Anda dapat menerapkan teknik ini ke segala jenis desain yang sedang Anda kerjakan setelah Anda memahami berbagai langkah yang diperlukan untuk membuat pendekatan tersebut berhasil.

Mari Mulai Berkreasi!

Tambahkan Bagian Baru

Warna latar belakang

Mulailah dengan membuat halaman baru atau membuka yang sudah ada dan menambahkan bagian reguler ke dalamnya. Buka pengaturan bagian dan tambahkan latar belakang.

Warna Latar Belakang: #f3f3ec

animasi yang tumpang tindih

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian Anda menggunakan struktur kolom berikut:

animasi yang tumpang tindih

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan biarkan baris memenuhi seluruh lebar layar. Alasan mengapa kami melakukan ini adalah untuk menghilangkan semua jarak piksel default. Pada langkah selanjutnya, kita akan menambahkan semua ruang yang kita butuhkan menggunakan unit viewport sebagai gantinya.

Jadikan Baris Ini Lebar Penuh: Ya
Gunakan Lebar Talang Kustom: Ya
Lebar Talang: 1

animasi yang tumpang tindih

Tambahkan Modul Teks ke Kolom

Tambahkan Konten H2

Mari mulai menambahkan modul! Modul pertama yang kita butuhkan adalah Modul Teks dengan beberapa konten H2. Ingatlah bahwa modul ini akan 'menghilang' setelah beberapa detik, jadi Anda ingin membuatnya singkat, relevan, dan mudah diingat.

animasi yang tumpang tindih

Pengaturan Teks H2

Lalu, buka tab desain dan ubah pengaturan teks H2.

Judul 2 Font: Poppins
Judul 2 Warna Teks: #333333
Judul 2 Ukuran Teks: 5vw

animasi yang tumpang tindih

Jarak

Buat ruang yang Anda inginkan menggunakan beberapa bantalan kiri dan kanan dalam pengaturan jarak.

Padding Kiri: 15vw
Padding Kanan: 39vw

animasi yang tumpang tindih

Tambahkan Modul Pembagi ke Kolom

Visibilitas

Lanjut ke modul selanjutnya yaitu Modul Pembagi. Kami menggunakan modul ini untuk membuat Modul Teks 'menghilang'. Ada empat hal yang kita perlukan untuk itu; warna latar belakang (yang memiliki warna yang sama dengan bagian sehingga Anda tidak dapat melihatnya), cukup padding (untuk memastikan Anda dapat tumpang tindih semua konten dalam modul sebelumnya), tumpang tindih vertikal (untuk menutupi seluruh modul area), dan penundaan animasi (untuk memberikan waktu modul pertama untuk bersinar sebelum mengambil alih). Setelah Anda menambahkan Modul Pembagi, pastikan Anda menonaktifkan opsi 'Tampilkan Pembagi'.

Tampilkan Pembagi: Tidak

animasi yang tumpang tindih