Cara Menggulir Secara Otomatis Secara Horizontal Saat Menggulir Secara Vertikal dengan Divi & GSAP

Semakin banyak Anda menjelajahi situs web di web, semakin banyak Anda menemukan beberapa pengalaman di halaman yang benar-benar disesuaikan. Anda mungkin bertanya-tanya bagaimana mencapai fungsionalitas lanjutan tertentu dan jawabannya sering kali ini: dengan menggunakan perpustakaan JavaScript animasi. Pustaka animasi yang populer saat ini adalah GSAP. Tetapi hanya karena Anda ingin menggunakan Pustaka JavaScript untuk sesuatu, tidak berarti Anda harus melalui bagian HTML dan CSS secara manual juga. Divi dapat mengambil alih sebagian besar proses desain web Anda; membangun dan mendesain, yang memberi Anda lebih banyak waktu untuk fokus pada fungsionalitas dan animasi khusus. Dalam tutorial hari ini, misalnya, kami akan menunjukkan kepada Anda cara menggulir secara horizontal ketika benar-benar menggulir secara vertikal menggunakan Divi dan GSAP. Ini menghasilkan efek animasi tingkat lanjut yang dapat Anda sesuaikan sesuka Anda. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

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

Desktop

Seluler

Unduh Tata Letaknya GRATIS

Untuk mendapatkan tata letak gratis, 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!

Ikhtisar Pendekatan

Apa yang Kami Gunakan

• divisi
• Pustaka JavaScript GSAP
• Plugin ScrollTrigger untuk GSAP
• Demo Pemicu Gulir

Apa yang Kami Ciptakan

• Pengguliran horizontal palsu saat menggulir secara vertikal
• efek pin
• Membuat efek bekerja pada sejumlah bagian pilihan kita (tidak harus seluruh halaman)
• Pengalaman layar horizontal yang mudah di semua ukuran layar

1. Tambahkan Bagian Placeholder

Tambahkan Bagian #1

Mulailah dengan menambahkan bagian pertama ke halaman yang sedang Anda kerjakan. Bagian ini akan berfungsi sebagai placeholder sehingga kita dapat melihat efek jatuh pada tempatnya.

Perekat

Buka pengaturan bagian dan tetapkan ketinggian ke pengaturan ukuran.

• Tinggi: 60vh

Bagian Klon #1

Kemudian, kloning bagian placeholder sekali. Ini akan membantu kami menghasilkan beberapa ruang di bagian atas dan bawah halaman kami, tanpa menjadi bagian dari pengguliran horizontal (lihat pratinjau).

1. Bangun Desain Bagian

Tambahkan Bagian Baru Antar Bagian

Sekarang setelah kita memiliki dua bagian placeholder, saatnya untuk membuat bagian pertama yang akan kita gunakan di dalam pengguliran horizontal. Tambahkan bagian ini tepat di antara dua bagian placeholder.

Perekat

Buka pengaturan bagian dan tetapkan ketinggian maksimum dalam pengaturan ukuran.

• Tinggi Maks: 100vh

Meluap

Kami juga menyetel luapan vertikal ke otomatis. Ini, dalam kombinasi dengan tinggi maksimum pada langkah sebelumnya, akan membantu kami menghasilkan bilah gulir secara otomatis pada ukuran layar tertentu di mana elemen bagian melebihi ketinggian viewport.

• Luapan Vertikal: Otomatis

Tambahkan Baris Baru

Struktur Kolom

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

Gambar latar belakang

Tanpa menambahkan modul, buka pengaturan baris dan gunakan gambar latar belakang.

• Ukuran Gambar Latar Belakang: Sampul
• Posisi Gambar Latar Belakang: Tengah

Perekat

Ubah pengaturan ukuran baris berikutnya.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar:
  • Desktop: 70%
  • Tablet & Telepon: 80%

Jarak

Seiring dengan pengaturan spasi.

• Bantalan Atas:
  • Desktop: 30vh
  • Tablet & Telepon: 20vh
• Padding Bawah: 0px

Pengaturan Kolom

Kemudian, buka pengaturan kolom.

Warna latar belakang

Gunakan warna latar belakang putih untuk kolom.

• Warna Latar Belakang: #ffffff

Jarak

Pindah ke tab desain kolom dan terapkan beberapa nilai padding kustom.

• Padding Atas: 5%
• Padding Bawah: 5%
• Padding Kiri: 5%
• Padding Kanan: 5%

Berbatasan

Gunakan perbatasan juga.

• Lebar Perbatasan: 1px
• Warna Perbatasan: #000000

Tambahkan Modul Teks #1 ke Kolom

Tambahkan Konten H4

Saatnya menambahkan modul, dimulai dengan Modul Teks pertama yang berisi beberapa konten H4.

Pengaturan Teks H4

Pindah ke tab desain modul dan ubah pengaturan teks H4 sebagai berikut:

• Judul 4 Font: Kode Sumber Pro
• Judul 4 Warna Teks: #000000
• Judul 4 Ukuran Teks:
  • Desktop: 1.2vw
  • Tablet: 2.5vw
  • Telepon: 3.5vw
• Spasi Judul 4 Huruf: 1px

Tambahkan Modul Teks #2 ke Kolom

Tambahkan Konten H3

Tambahkan Modul Teks lain tepat di bawah yang sebelumnya dan gunakan beberapa konten H3 di kotak konten.

Pengaturan Teks H3

Pindah ke tab desain modul dan ubah pengaturan teks H3 yang sesuai:

• Judul 3 Font: Alata
• Judul 3 Ukuran Teks:
  • Desktop: 2.5vw
  • Tablet: 4vw
  • Telepon: 7vw

Tambahkan Modul Teks #3 ke Kolom

Tambah isi

Tambahkan Modul Teks terakhir ke kolom dengan beberapa konten deskripsi pilihan Anda.

Pengaturan Teks

Ubah pengaturan teks modul yang sesuai:

• Font Teks: Kode Sumber Pro
• Ukuran teks:
  • Desktop: 0.8vw
  • Tablet: 2vw
  • Telepon: 3vw
• Tinggi Baris Teks: 1.5em

Perekat

Ubah pengaturan ukuran berikutnya.

• Lebar:
  • Desktop: 67%
  • Tablet & Telepon: 100%

Jarak

Dan selesaikan pengaturan modul dengan menerapkan beberapa nilai padding responsif ke pengaturan spasi.

• Bantalan Atas:
  • Desktop: 3vh
  • Tablet & Telepon: 5vh
• Bantalan Bawah:
  • Desktop: 3vh
  • Tablet & Telepon: 5vh

Tambahkan Modul Tombol ke Kolom

Tambahkan Salinan

Modul terakhir yang kita butuhkan untuk menyelesaikan desain baris adalah Modul Tombol. Tambahkan beberapa salinan pilihan Anda.

Pengaturan Tombol

Pindah ke tab desain modul dan ubah pengaturan tombol yang sesuai:

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol:
  • Desktop: 0.8vw
  • Tablet: 2vw
  • Telepon: 3vw
• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #000000
• Lebar Batas Tombol: 0px
• Radius Perbatasan Tombol: 0px
• Font Tombol: Kode Sumber Pro
• Gaya Font Tombol: Huruf Besar

Jarak

Tambahkan beberapa nilai padding kustom berikutnya.

• Padding Atas: 15px
• Padding Bawah: 15px
• Padding Kiri: 50px
• Padding Kanan: 50px

Posisi

Dan reposisi modul di tab lanjutan.

• Posisi: Absolut
• Lokasi: Pojok Kiri Bawah
• Offset Vertikal: -5%
• Offset Horisontal: 5%

2. Bagian Penggunaan Kembali

Bagian Klon Dua Kali

Setelah Anda menyelesaikan bagian pertama, Anda dapat mengkloningnya dua kali.

Ubah Gambar & Salin & Tautan

Pastikan Anda mengubah gambar, salin, dan tautan di setiap bagian duplikat.

2. Tambahkan Fungsionalitas

Tambahkan Kelas CSS ke Setiap Bagian yang Ingin Anda Sertakan dalam Gulir Horizontal

Sekarang kita memiliki semua elemen di tempat, kita dapat mulai berfokus pada fungsionalitas dari semuanya. Langkah pertama untuk mencapai hasilnya adalah menetapkan kelas CSS khusus untuk setiap bagian yang Anda inginkan untuk menjadi bagian dari pengguliran horizontal. Dalam hal ini, itu berarti tiga bagian di antara bagian placeholder.

• Kelas CSS: bagian horizontal

Tambahkan Modul Kode Baru Di Suatu Tempat Di Dalam Halaman

Selanjutnya, tambahkan Modul Kode ke halaman. Ini bisa di mana saja Anda inginkan.

Tambahkan Perpustakaan GSAP & ScrollTrigger Terlebih Dahulu

Salin-tempel pustaka GSAP dan ScrollTrigger di dalam Modul Kode. Gunakan tag skrip untuk ini dengan sumber berikut:

src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"

Tambahkan Tag Skrip Baru untuk Kode Kustom

Tepat di bawah tag skrip perpustakaan, kami akan menambahkan beberapa tag skrip baru.

Tambahkan Kode JS

Mempersiapkan Penggunaan JQuery

Di dalam tag skrip ini, kita akan mulai dengan memuat JQuery.

jQuery(document).ready(function($){  
});

Daftar Plugin ScrollTrigger

Kemudian, kita akan mendaftarkan plugin ScrollTrigger.

gsap.registerPlugin(ScrollTrigger);

Bungkus Semua Bagian yang Relevan dalam Div Baru

Kami juga menempatkan setiap bagian yang relevan di dalam div baru menggunakan baris kode berikut:

var allSections = $('.horizontal-section');
allSections.wrapAll('<div class="horizontal-container"/>');  

Buat Tween GSAP Baru dengan ScrollTrigger

Untuk membuat pengguliran horizontal palsu berfungsi, kita akan menggunakan tween baru dengan pemicu gulir. Kode yang membuat ini terjadi adalah sebagai berikut:

gsap.to(allSections, {
  xPercent: -100 * (allSections.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: ".horizontal-container",
    pin: true,
    start: "top top",
    scrub: 1,
    snap: false,
    // base vertical scrolling on how wide the container is so it feels more natural.
    end: () => "+=" + document.querySelector(".horizontal-container").offsetWidth
  }
});

Tambahkan Tag Gaya untuk Kode CSS Kustom

Selanjutnya, kami akan menambahkan beberapa tag gaya ke Modul Kode kami.

Masukkan Kode CSS Antara Tag Gaya

Dan kita akan menyelesaikan tutorial, dan fungsionalitasnya, dengan menambahkan baris kode CSS berikut di antara tag gaya:

.horizontal-container {
width: 300%;
height: 100%;
display: flex;
flex-wrap: nowrap;
max-width: none;
}

#page-container {
overflow: hidden;
}

.horizontal-section {
width: 100%;
will-change: transform;
}

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara bekerja lebih keras untuk situs web Anda dengan Divi dan GSAP. Lebih khusus lagi, kami telah menunjukkan kepada Anda cara menggulir secara horizontal ketika benar-benar menggulir secara vertikal di halaman Anda. Ini adalah jenis animasi khusus yang mungkin Anda temui pada titik tertentu dan bertanya-tanya bagaimana Anda bisa melakukannya dengan DIvi. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah.

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.