7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. fullPage.js

Scrolling Vertical dan Horizontal dengan fullpage.js

Scroll to top
Read Time: 8 mins

Indonesian (Bahasa Indonesia) translation by Zadip (you can also view the original English article)

Hari ini lebih banyak situs yang didesain berdasarkan pendekatan satu halaman (dikenal sebagai satu halaman atau satu halaman situs). Dalam artikel ini, kita akan mengeksplorasi cara untuk menciptakan sebuah pengalaman untuk situs demo dengan mengambil keuntungan dari fullPage.js.

Perhatikan apa yangbakan kita lakukan pada demo Codepen ini. Selain itu, semua file untuk demo ini dapat ditemukan pada Github repositori ini.

Apa itu fullPage.js?

fullPage.js merupakan jQuery plugin berbasis yang memungkinkan kita untuk membangun satu halaman scrolling website. Dibuat oleh pengembang web Alvaro Trigo, sebagaimana kita lihat di bagian selanjutnya, didatangkan dengan sejumlah pilihan penyesuaian yang berbeda.

Selain itu, plugin ini tersedia dengan terorganisir dengan dokumentasi yang baik serta banyak contoh-contohnya.

Untungnya, tidak hanya bekerja di semua browser modern, tetapi juga di beberapa contoh yang lebih tua seperti IE 8 dan Opera 12.

Akhirnya, Anda mungkin ingin melihat versi Wordpress itu.

Memulai dengan fullPage.js

Untuk memulai dengan fullPage, Anda harus men-download dan menginstal file-file ini dalam proyek Anda:

  • JQuery library (≥1.6.0)
  • Jquery.fullPage.css CSS file
  • Jquery.fullPage.js js file atau versi minified (yaitu jquery.fullPage.min.js)

Anda dapat mengambil copy-annya dari file tersebut dengan mengunjungi Github repo, menggunakan Manajer paket (misalnya Bower), atau dengan memuat aset yang diperlukan melalui CDN (misalnya cdnjs). Untuk tutorial ini, kita akan memilih pilihan terakhir.

Menempatkan link ke CSS file dalam<head>dokumen HTML Anda:</head>

.. .dan JS script sebelum penutupan<body>Tag:</body>

Sekarang, kita siap untuk menyelami plugin lebih dalam!

Membuat bagian-bagian Fullpage

Pertama, kita harus menentukan bagian-bagian dari situsnya. Untuk melakukannya, kita tetapkan bagian kelas untuk elemen target dan merangkumnya dalam wadah yang memiliki pengidentifikasi unik. Kemudian, pengenal ini akan digunakan untuk menginisialisasi instance dari fullPage.

Secara default, plugin menganggap bagian pertama untuk menjadi aktif. Namun, jika kita ingin, kita dapat mengubah perilaku dengan menambahkan kelas aktif untuk bagian yang diinginkan.

Berikut adalah struktur HTML yang memerlukan contoh:

Perhatikan bahwa semua bagian berbagi nama kelas yang Umum (yaitu vertikal-bergulir) yang telah kita pilih untuk menjadi berbeda dengan standar satu (yaitu Bagian). Pada kasus ini, yang kita perlu informasikan plugin tentang perubahan ini selama proses inisialisasi.

Menciptakan horisontal slide

Masing-masing bagian ditumpuk secara vertikal ini opsional dapat slider horisontal dengan satu atau lebih slide. Untuk mengidentifikasi slides, kami menerapkan kelas slide ke elemen target dan sarang mereka dalam bagian yang sesuai.

Selain itu, sangat penting untuk menyebutkan bahwa, secara teknis, slide pertama sama bagian induknya. Kita akan memeriksa perilaku ini cukup lama!

Kembali ke contoh, snipet kode di bawah ini menunjukkan bagaimana kita mengatur dua slide dalam bagian kelima:

Sekali lagi, seperti yang Anda lihat, kami telah memberikan kami slide nama kelas kustom (yaitu horisontal-bergulir).

Pengontrolan penampilan situs

Kita dapat mengontrol tampilan slide serta section dengan mengambil keuntungan dari parameter konfigurasi yang tersedia. Salah satu parameter-parameter tersebut adalah sectionColor properti yang memberi kita cara mudah untuk menentukan CSS warna latar belakang properti untuk setiap bagian.

Selain itu, kita dapat mengatur gaya kita sendiri untuk lebih lanjut menyesuaikan halaman. Sebagai contoh, bayangkan bahwa kita ingin menerapkan sebuah gambar latar belakang penuh untuk bagian kedua. Berikut ini merupakan cara kita bisa melakukannya:

Menyesuaikan pilihan navigasi

Plugin menawarkan banyak built-in pilihan untuk bergerak melalui bagian dan slide. Beberapa pilihan diaktifkan secara default (misalnya roda mouse dan keyboard), sementara orang lain secara manual memicu melalui konfigurasi objek (misalnya lingkaran titik).

Dalam proyek ini, kita ingin menambahkan tambahan navigasi dalam bentuk titik. Selain itu, kita memilih untuk menyembunyikan panah kiri dan kanan yang biasanya muncul pada slider. Jadi, setelah memungkinkan navigasi dot, kita dapat mengubah penampilan dengan menimpa gaya standar. Berikut adalah aturan baru:

Dan di bawah ini adalah screenshot yang menunjukkan perubahan yang telah dibuat:

default vs custom stylesdefault vs custom stylesdefault vs custom styles
Default, vs gaya kustom

Harap dicatat bahwa kita menyertakan aturan di atas dalam stylesheet kostum, dengan demikian menghindari perubahan plugin CSS file.

Membuat link ke bagian dan slide

fullPage.js memungkinkan kita untuk mengubah URL situs kami seperti kami menggulir ke bagian yang berbeda. Untuk melakukannya, kita menggunakan parameter jangkar. Lebih khusus lagi, parameter ini adalah array yang memegang anchor link yang harus ditampilkan pada URL untuk setiap bagian. Misalnya, dalam contoh kita kita menetapkan jangkar link berikut (yang harus unik):

Yang dilakukan, ketika kita mengunjungi bagian pertama, URL situs akan memiliki pengenal #firstSection pada akhir, pada kedua URL akan berakhir dalam #secondSection dan seterusnya.

Dengan cara yang sama, plugin juga memodifikasi URL sementara kami gulir melalui slide. Meskipun pada titik ini, kita harus ingat bahwa pada dasarnya slide pertama (yang memiliki indeks 0) merupakan terkain bagian induknya. Dengan memikirkannya, dalam proyek ketika kita berada di slide pertama bagian kelima, URL akan berakhir di #fifthSection jangkar link. Loading slide kedua bagian yang sama akan memicu URL yang berakhir di #fifthSection/1 karena slide kedua (yang memiliki indeks 1) adalah benar-benar slide kami "pertama".

Hal ini menyebutkan bahwa kita dapat memodifikasi jangkar untuk slide dengan menambahkan atribut data-jangkar kepadanya berikut dengan nama (yang juga harus unik), seperti contoh berikut:

<div class="horizontal-scrolling" data-anchor="firstSlide"><!-- more content here --></div>

Catatan: Untuk melihat URL yang berubah seperti yang Anda menggulir, check out pandangan Debug demo.

Menghubungkan menu bagian dan slide

Untuk lebih memahami bagaimana kita dapat menghubungkan menu untuk fullPage, mari kita lihat di header. Gambar di bawah menunjukkan bagaimana muncul:

Dan HTML:

Selama sebagai ikon menu hamburger dipicu, tampilan menu utama muncul:

Berikut adalah kode yang terkait dengan menu ini:

Jadi, untuk membiarkan fullPage tahu tentang menu, kita harus mendaftar dengan menggunakan menu konfigurasi properti. Selanjutnya kita perlu link item menu ke bagian yang relevan. Untuk melakukan ini, kita menambahkan atribut data-menuanchor untuk barang-barang kami dengan masing-masing link sebagai nilai-nilai. Sebagai nilai-nilai tersebut cocok, plugin aktif kelas (seperti yang kita gulir) untuk menambahkan item menu yang sesuai.

Perhatikan bahwa plugin tidak belum menambahkan kelas aktif ke slide. Untuk memperbaiki ini, kita dapat menggunakan jQuery (solusi terbaik) atau CSS. Dalam contoh kita, kita memecahkan masalah ini dengan menambahkan aturan CSS yang berikut:

Lihat hasil di bawah ini:

Dalam kenyataannya, kita tidak menambahkan kelas aktif ke slide kedua. Dengan mengambil keuntungan dari kelas tubuh yang berbeda yang menambahkan plugin untuk setiap bagian dan slide, kami hanya memberikan item ini gaya kelas aktif.

Catatan: kita tidak akan fokus lebih lanjut tentang cara kerja menu ini karena itu adalah di luar cakupan tutorial ini.

Tembak callback untuk bagiannya

AfterLoad callback dihentikan setelah bagian load dan daun onLeave callback sekali pengguna.

Dalam proyek, kita menyembunyikan navigasi vertikal dot ketika bagian kelima dimuat:

Section4, kemudian Section5 dengan titik-titik tidak

Berikut adalah bagaimana kami melakukannya:

Tembak callback untuk slide

Callback afterSlideLoad dipicu ketika slide dimuat dan callback onSlideLeave ketika pengguna meninggalkannya. 

Dalam kasus kami, kami fokus pada slide kedua untuk melakukan sejumlah tindakan yang berbeda  Misalnya, begitu slide dimuat kita menonaktifkan kemungkinan untuk menggulir ke atas.  Selain itu, kami mengubah properti latar belakang warna dari slide ini serta tampilan elemen-elemen yang menjadi miliknya.

Bagian dari kode yang kami gunakan ditunjukkan di bawah ini:. 

Menginisialisasi Plugin 

Ini adalah langkah terakhir yang diperlukan untuk memicu fungsionalitas dari fullPage.  Di sini, kami lulus sebagai bagian dari objek konfigurasi semua kustomisasi kami. Lihatlah cuplikan kode yang relevan di bawah ini: 

Penyelesaian

Look at the relevant code snippet below:  Penting untuk memahami bahwa situs web jenis ini tidak cocok untuk semua kasus. Selain desain yang menarik, mereka memiliki banyak batasan dan pemeliharaannya bisa sulit, terutama untuk situs yang dinamis. Ditambah, format ini bisa menyebabkan komplikasi dengan SEO.

Step Selanjutnya

Jika Anda ingin menggunakan situs demo sebagai dasar untuk bereksperimen dengan plugin, saya sarankan tantangan berikut:

  • Gabungkan perpustakaan animate.css  yang sangat baik ke dalam proyek dan cobalah untuk membuat animasi berbasis gulir.
  • Gunakan pengetahuan jQuery Anda untuk mengaktifkan kelas ke slide kedua (lihat bagian Menghubungkan Menu ke Bagian dan Slide)

Akhirnya, jika Anda memiliki pengalaman dengan situs satu halaman, silakan berbagi pemikiran Anda dengan kami di komentar di bawah ini! 

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.