Jika Anda sedang mencari cara untuk membuat animasi yang halus dengan efek pengguliran bawaan Divi, Anda akan menyukai tutorial ini. Kami akan menunjukkan kepada Anda bagaimana menggabungkan snap gulir dengan efek gerakan bawaan Divi untuk membuat bagian ketinggian penuh yang dapat Anda gulirkan sekaligus.
Kami akan mulai dengan membuat bagian pertama. Oleh karena itu, kami akan menggunakan kembali bagian ini di seluruh desain halaman kami. Untuk mengaktifkan scroll snapping, kami akan menggunakan properti CSS scroll snap yang akan kami tetapkan ke bagian, HTML, header, dan footer halaman kami.
Kemungkinan Hasil
Sebelum kita menyelami tutorialnya, mari kita lihat sekilas hasil pada ukuran layar yang berbeda.
1. Buat halaman baru dan mulailah mendesain bagian pertama
Tambahkan halaman baru dan beralih ke Pembuat Visual
Mulailah dengan menambahkan halaman baru. Masukkan judul halaman, terbitkan halaman, dan beralih ke Visual Builder.
Pengaturan bagian
perekat
Setelah berada di dalam halaman baru, buka bagian yang sudah ada dan ubah pengaturan ukuran.
- Tinggi minimum: 100vh
Elemen Utama
Kami juga menambahkan dua baris kode CSS ke bagian tersebut. Baris kode CSS ini akan membantu kita mengubah bagian tersebut menjadi titik snap untuk scroll gulir.
scroll-snap-align: start; scroll-snap-stop: normal;
jarak penglihatan
Untuk memastikan tidak ada yang di luar wadah bagian, kami akan menyembunyikan bagian meluap.
- Overflow horisontal: disembunyikan
- Overflow vertikal: disembunyikan
Tambahkan baris # 1
Struktur kolom
Lanjutkan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:
perekat
Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah ukurannya sebagai berikut:
- Gunakan Lebar Talang Khusus: Ya
- Lebar Talang: 1
- Lebar: 100%
- Lebar Maks: 100%
Jarak
Kami juga menghapus padding bagian atas dan bawah default.
- Lapisan Atas: 0px
- Bantalan Bawah: 0px
Posisi
Dan kami akan memposisikan ulang baris yang sesuai:
- Posisi: Mutlak
- Lokasi: Bawah Tengah
Tambahkan Modul Teks ke Kolom
Biarkan Kotak Konten Kosong
Satu-satunya modul yang kita butuhkan di baris ini adalah Modul Teks. Pastikan Anda membiarkan kotak konten modul kosong.
Warna latar belakang
Kemudian, ubah warna latar belakang.
- Warna Latar Belakang: # ffee00
Pengaturan teks
Kami juga akan menghapus ketinggian baris teks modul.
- Tinggi Baris Teks: 1em
Perekat
Kemudian, kita akan pergi ke pengaturan ukuran dan mengubah lebarnya.
- Lebar: 30%
Jarak
Kami akan mengubah modul menjadi persegi dengan menambahkan beberapa pelapis atas juga.
- Bantalan Atas: 30%
Tambahkan Baris # 2
Struktur kolom
Di baris berikutnya. Gunakan struktur kolom berikut:
perekat
Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran di tab desain:
- Gunakan lebar selokan khusus: Ya
- Lebar selokan: 1
- Lebar: 60vw
- Lebar maks: 100%
jarak
Kemudian tambahkan margin atas kustom pada ukuran layar yang berbeda.
- Margin atas: 20vh (desktop), 5vw (tablet dan telepon)
Kolom 2 Spasi
Kemudian kita akan membuka pengaturan di kolom 2 dan menambahkan nilai isian khusus.
- Lapisan atas: 2vh (tablet dan telepon)
- Padding kiri: 2vw
- Padding kanan: 2vw
Tambahkan modul gambar ke kolom 1
Upload Gambar
Saatnya menambahkan mod, menambahkan mod gambar ke kolom 1 dan mengunggah gambar pilihan Anda.
perekat
Kami kemudian akan memaksa lebar penuh pada modul.
- Lebar paksa penuh: Ya
Tambahkan modul teks # 1 ke kolom 2
Tambahkan konten H2
Pada kolom kedua, modul pertama yang kita perlukan adalah modul teks dengan isi H2.
Pengaturan teks H2
Buka tab desain modul dan ubah pengaturan teks H2 sebagai berikut:
- Tajuk 2 Huruf: Anton
- Item 2 Ukuran teks: 5vw (desktop), 7vw (tablet), 9vw (telepon)
Tambahkan modul teks # 2 ke kolom 2
Tambahkan konten
Tambahkan modul teks lain tepat di bawah tepat di bawah yang sebelumnya dan masukkan isi dari deskripsi pilihan Anda.
Pengaturan teks
Ubah pengaturan teks modul sebagai berikut:
- Font Teks: Buka Sans
- Ukuran teks: 0.8vw (desktop), 2vw (tablet), 2.5vw (telepon)
- Tinggi baris teks: 1,8 em
jarak
Dan tambahkan margin atas dan bawah kustom ke pengaturan jarak.
- Margin atas: 2vw
- Margin bawah: 2vw
Tambahkan modul tombol ke kolom 2
Tambahkan salinan
Modul berikutnya dan terakhir yang kita butuhkan di kolom ini adalah modul tombol. Tambahkan salinan pilihan Anda.
Pengaturan tombol
Gaya tombol sesuai:
- Gunakan gaya khusus untuk tombol: Ya
- Ukuran teks tombol: 1vw (desktop), 2vw (tablet), 3vw (telepon)
- Warna Teks Tombol: # 333333
- Warna Batas Tombol: # 333333
- Jari-jari tombol: 1px
- Font Tombol: Anton
- Tombol Font Style: Huruf Besar
jarak
Dan selesaikan pengaturan modul dengan menambahkan nilai khusus berdasarkan ukuran layar.
- Margin Internal Tinggi: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
- Margin Internal Rendah: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
- Margin Internal Kiri: 3vw (Desktop), 5vw (Tablet), 7vw (Telepon)
- Margin Internet Kanan: 3vw (Desktop), 5vw (Tablet), 7vw (Telepon)
2. Tambahkan efek gulir ke berbagai elemen
Modul teks pada baris # 1
Animasi Vertikal
Setelah semua elemen berada di tempatnya, saatnya untuk menambahkan efek gulir. Buka Modul Teks di baris pertama Anda dan gunakan beberapa gerakan vertikal.
- Aktifkan Gerakan Vertikal: Ya
- Mulai Offset: 4
- Offset Tengah: 0
- Mengakhiri Offset: -4
- Pemicu Efek Gerak: Elemen Tengah
Baris # 2
Kolom 1
Animasi Horisontal
Kemudian buka kolom pertama dari baris kedua Anda dan tambahkan gerakan horizontal.
- Aktifkan gerakan horizontal: Ya
- Mulai offset: -3
- Offset rata-rata: 0 (dari 40% hingga 60%)
- End offset: -3
- Pemicu Efek Gerak: Bagian Tengah Elemen
Pudar masuk dan keluar
Kami juga menerapkan efek fade in dan fade out ke kolom yang sama.
- Aktifkan fade in dan out: Ya
- Opacity awal: 0%
- Opacity rata-rata: 100%
- End opacity: 100%
- Pemicu Efek Gerak: Bagian Tengah Elemen
Kolom 2
Pergerakan horizontal
Kemudian kita akan membuka parameter kolom kedua dan menerapkan parameter gerakan horisontal berikut:
- Aktifkan gerakan horizontal: Ya
- Mulai offset: 3
- Offset rata-rata: 0 (dari 40% hingga 60%)
- End offset: 3
- Pemicu Efek Gerak: Bagian Tengah Elemen
Pudar masuk dan keluar
Dengan efek fade masuk dan keluar.
- Aktifkan fade in dan out: Ya
- Opacity awal: 0%
- Opacity rata-rata: 100%
- End opacity: 100%
- Pemicu Efek Gerak: Bagian Tengah Elemen
4. Gunakan kembali bagian pertama
Klon bagian empat kali
Setelah Anda menyelesaikan bagian pertama dan efek gulirnya, Anda dapat mengkloningnya sebanyak yang Anda suka.
Ubah warna latar belakang semua bagian lainnya
Kami akan mengubah warna latar belakang dari semua bagian lainnya.
- Warna Latar Belakang: # 111111
5. Tambahkan kode CSS untuk mengaktifkan pengambilan gulir pada halaman HTML
Tambahkan modul kode ke bagian terakhir halaman
Sekarang untuk mengaktifkan scrolling capture pada HTML halaman kita, kita akan menambahkan modul kode dimanapun di bagian terakhir halaman kita.
Masukkan kode HTML HTML
Baris kode CSS ini akan membantu kita menerapkan perataan gulir ke kode HTML halaman kita:
<style> html {overflow-x: hidden;scroll-snap-type: y mandatory;scroll-snap-points-y: repeat(100vh);} </style>
Tambahkan Gulir Gertakan Mulai ke Header dan Footer
Kami akan memastikan bahwa header dan footer kami juga merupakan titik gulir (seperti bagian kami) dengan menambahkan baris kode CSS berikut:
tajuk, catatan kaki {scroll-snap-align: mulai;}
Selesai
Dalam artikel ini, kami telah menunjukkan kepada Anda cara membuat animasi yang halus dengan menggabungkan scrolling snap dengan efek gerakan bawaan Divi. Ini adalah cara terbaik untuk mengaktifkan efek gulir hanya dengan satu gulir.
Tangkapan gulir membantu pengunjung untuk dengan mudah menelusuri berbagai bagian Anda situs jaringan. Kami menggabungkannya dengan desain bagian tinggi penuh. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk memberikan komentar di bagian komentar di bawah.
