Cara Menggabungkan Animasi dan Paralaks di Divi untuk Desain Unik
Diterbitkan: 2019-08-07Baik kita sedang menyiapkan makanan atau mendesain situs web, bahan-bahannya saja tidak akan menjamin hidangan yang lezat atau situs yang indah. Seberapa baik kita menggabungkan elemen-elemen itu bersama-sama yang membuat semua perbedaan. Dalam tutorial ini, saya akan menunjukkan cara menggabungkan animasi dan paralaks gambar dengan cara yang mungkin belum pernah Anda pertimbangkan sebelumnya. Jika Anda belum tahu, animasi adalah fitur Divi bawaan yang dapat ditambahkan ke elemen Divi mana pun saat memuat halaman. Parallax juga merupakan opsi Divi yang memungkinkan Anda menambahkan gerakan unik ke gambar latar belakang Anda saat menggulir.
Hari ini, kita akan menggunakan pengaturan desain bawaan Divi untuk menggabungkan animasi dan paralaks dalam berbagai cara kreatif. Kombinasi ini bekerja sama secara ajaib untuk menciptakan tata letak yang indah dari gambar paralaks animasi yang terlihat mengagumkan saat Anda menggulir halaman ke bawah.
Mari kita mulai!
Sneak Peek
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 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.
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 ke halaman Anda, cukup ekstrak file zip dan seret file json ke Divi Builder.
Langsung saja ke tutorialnya ya?
Apa yang Anda Butuhkan untuk Memulai
Untuk memulai, Anda harus memiliki yang berikut:
- Tema Divi diinstal dan aktif
- Halaman baru dibuat untuk membangun dari awal di ujung depan (pembuat visual)
- Gambar yang akan digunakan untuk konten tiruan. Anda dapat menemukan gambar yang digunakan untuk tutorial ini di Paket Tata Letak Divi Life Coach.
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Ide Dasar
Ide dasar di balik konsep desain ini berpusat pada penggunaan paralaks CSS pada gambar latar. Karena cara kerja paralaks CSS, gambar paralaks akan tetap dan secara otomatis mengisi jendela browser tidak peduli ukuran elemen yang menggunakannya. Sifat gambar yang tetap memungkinkan Anda untuk menggunakan gambar paralaks yang sama pada beberapa elemen di Divi dan kemudian memindahkan elemen-elemen tersebut menggunakan animasi. Saat animasi selesai, gambar latar belakang paralaks yang digunakan akan cocok dan berfungsi seperti yang diharapkan saat menggulir halaman ke bawah.
Bagian 1: Membuat Animasi Divi dan Desain Paralaks (Versi 1)
Buat bagian baru dengan baris dua kolom (1/2 1/2).
Sebelum kita menambahkan modul kita, mari kita membuat beberapa penyesuaian pada bagian dan baris.
Perbarui Pengaturan Bagian dan Baris
Pertama, buka pengaturan bagian dan keluarkan padding default sebagai berikut:
Padding: 0px atas, 0px bawah
Kemudian buka pengaturan baris dan berikan baris gambar latar belakang paralaks.
Gambar Latar Belakang: [unggah gambar]
Gunakan Efek Paralaks: YA
Metode Paralaks: CSS
Di sini metode paralaks harus disetel ke CSS agar desain berfungsi.
Lebar: 100%
Lebar Maks: 100%
Padding: 10vw atas, 10vw kiri, 10vw kanan
Tambahkan Modul Teks dengan Latar Belakang Paralaks yang Cocok
Sekarang kita siap untuk mulai menambahkan modul teks kita ke desain. Modul teks pertama adalah kunci untuk desain ini. Dengan menerapkan gambar latar belakang yang sama persis dan paralaks css ke modul teks, kita bisa berkreasi dengan animasi untuk efek yang benar-benar unik.
Silakan dan tambahkan modul teks baru ke kolom 1.
Kemudian perbarui pengaturan modul teks sebagai berikut:
Isi Tubuh:
<p>Hi!<br>I'm Jane...</p> <a href="#">about me</a>
Kemudian berikan modul teks gambar latar belakang paralaks css yang sama yang Anda tambahkan ke baris.
Gambar Latar Belakang: [unggah gambar]
Gunakan Efek Paralaks: YA
Metode Paralaks: CSS
Font Teks: Fira Sans
Berat Font Teks: Ringan
Warna Teks Teks: #ffffff
Ukuran Teks Teks: 70px
Tinggi Baris Teks: 1em
Gaya Font Tautan: Garis Bawah (U)
Warna Teks Tautan: #ffffff (default), #881e67 (arahkan kursor)
Ukuran Teks Tautan: 30px
Jarak Huruf Tautan: 2px
Padding: 20% atas, 20% bawah, 10% kiri, 10% kanan
Lebar Perbatasan: 20px
Warna Perbatasan: #ffffff
Kemudian tambahkan animasi berikut ke modul teks:
Gaya Animasi: Slide
Arah Animasi: Kanan
Durasi Animasi: 1500ms
Intensitas Animasi: 80%
Opacity Mulai Animasi: 20%
Mari kita lihat efeknya sejauh ini…
Perhatikan bagaimana gambar latar belakang modul teks animasi berhenti pada lokasi yang cocok dari latar belakang baris. Ini karena keduanya berbagi gambar latar belakang yang sama dengan efek paralaks css.
Menambahkan Modul Teks Kedua dengan Gambar Latar Belakang Paralaks Sejati
Pada titik ini kita siap untuk menambahkan modul teks berikutnya. Yang berikutnya ini akan memiliki gambar latar belakang yang berbeda menggunakan efek paralaks yang sebenarnya. Kami juga akan memberikan beberapa animasi juga.
Tambahkan modul teks baru ke kolom 2.
Kemudian update isi body dengan kata “my blog”.
Kemudian tambahkan gambar latar belakang dengan metode paralaks sejati.
Gambar Latar Belakang: [unggah gambar]
Gunakan Efek Paralaks: YA
Metode Paralaks: Paralaks Sejati
Font Teks: Fira Mono
Gaya Font Teks: TT
Perataan Teks Teks: tengah
Warna Teks Teks: #ffffff
Spasi Huruf Teks: 10px
Lebar: 320 piksel
Lebar Maks: 320px
Penyelarasan Modul: Pusat
Margin: (desktop): -5vw atas, 4vw bawah
Margin (tablet dan ponsel): 3vw atas
Padding: 70px atas, 70px bawah
Lebar Perbatasan: 20px
Warna Perbatasan: #ffffff
Gaya Animasi: Slide
Arah animasi: bawah
Penundaan Animasi: 200ms
Membuat Modul Teks Ketiga dengan Gambar Latar Belakang Paralaks baru
Untuk membuat modul teks ketiga, duplikat modul teks yang baru saja Anda buat di kolom 2.
Kemudian kita akan menjaga gambar latar belakang tetap sama tetapi kita akan memperbarui efek paralaks dengan metode paralaks CSS.
Lebar: 240px
Lebar Maks: 240px
Penyelarasan Modul: kiri
Margin: 0px bawah
Padding: 170px atas, 170px bawah, 95px kiri, 95px kanan
Lebar kustom dan padding kanan dan kiri digunakan untuk membuat tampilan teks vertikal yang cocok dengan desain modul yang lebih panjang.
Kemudian perbarui arah animasi ke atas, bukan ke bawah.
Arah Animasi: UP
Hasil Akhir
Sekarang mari kita lihat hasil akhirnya.
Bagian 2: Membuat Animasi dan Desain Paralaks (versi 2)
Desain selanjutnya ini akan menambahkan animasi unik dengan memuat gambar latar belakang paralaks untuk baris setelah animasi awal modul. Untuk melakukan ini, kita perlu menggunakan baris terpisah secara ketat untuk gambar latar belakang paralaks CSS yang akan bergerak di belakang konten. Dan karena latar belakang bagian kita akan terekspos pada awalnya, kita dapat menambahkan warna latar belakang khusus untuk konten kita sebelum animasi baris.
Berikut cara melakukannya.
Pertama, terapkan mode tampilan gambar rangka. Kemudian duplikat baris yang berisi modul teks Anda. Sekarang Anda akan memiliki dua baris yang identik. Selanjutnya, hapus modul teks di dalam baris atas. Yang benar-benar ingin kami lakukan adalah memulai desain baris teratas kami.
Selanjutnya, perbarui pengaturan untuk baris atas sebagai berikut:
Tinggi: 900px (desktop), 2000px (tablet dan ponsel)
Padding: 0px atas, 0px bawah
Gaya Animasi: Slide
Arah Animasi: Kanan
Durasi Animasi: 1250ms
Penundaan Animasi: 1800ms
Kami memberikan baris ketinggian yang ditetapkan karena baris kosong tidak akan memiliki ketinggian secara default. Jadi, Anda perlu memastikan ketinggian baris cukup untuk menutupi konten baris kedua Anda dengan konten. Kami juga memberi baris animasi dengan penundaan sehingga akan meluncur di belakang konten setelah modul teks muncul.
Tumpang Tindih Dua Baris
Sekarang yang harus kita lakukan adalah membawa baris bawah ke atas menggunakan margin negatif sehingga tumpang tindih baris atas dengan animasi latar belakang kita.
Buka pengaturan untuk baris bawah dan perbarui margin sebagai berikut:
Margin: -900px atas (desktop), -2000px (tablet dan ponsel)
Kemudian keluarkan gambar latar belakang dengan metode paralaks css untuk baris karena kita akan menggunakan gambar latar baris atas sebagai gantinya.
Berikut adalah desain sejauh ini. Perhatikan animasi latar belakang yang tertunda di baris pertama dan bagaimana latar belakang paralaks untuk modul teks di kolom 1 cocok dengan sempurna.
Menambahkan Warna Latar Belakang Bagian
Untuk memberi modul teks warna latar belakang awal sebelum animasi baris, Anda dapat memberikan warna latar belakang ke bagian tersebut.
Buka pengaturan bagian dan tambahkan yang berikut:
Warna Kiri Gradien Latar Belakang: rgba(136,30,103,0.61)
Warna Gradien Latar Belakang Kanan: #881e67
Tipe Gradien: Radial
Hasil Akhir
Sekarang mari kita lihat hasil akhirnya.
Mode Campuran Opsional dan kombo Animasi
Anda juga bisa menjadi lebih kreatif dengan menambahkan mode campuran ke baris kedua dan menambahkan animasi zoom yang akan bekerja bersama-sama dengan animasi modul.
Mode Campuran: Luminositas
Gaya Animasi: Zoom
Berikut adalah hasil akhirnya.
Dan inilah tampilannya di ponsel.
Pikiran Akhir
Saya harap Anda telah mempelajari beberapa hal selama kami menjelajahi beberapa cara unik untuk menggabungkan gambar animasi dan paralaks. Hasilnya pasti unik dan saya yakin Anda dapat dengan mudah men-tweak setup ini untuk membangun kombinasi lain yang tak terhitung jumlahnya yang akan terlihat menakjubkan pada proyek Anda berikutnya.
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!