Scrolling Vertical dan Horizontal dengan fullpage.js

3:45:00 AM 10:42:48 PM

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

Perhatikan apa yang akan kita lakukan pada demo di web Mata Panda Crew 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 single page 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>

1:  <link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.css" rel="stylesheet">

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

1:  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>  
2:  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>

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:

1:  <div id="fullPage">  
2:    <section class="vertical-scrolling">  
3:      <h2>fullPage.js</h2>  
4:      <h3>This is the first section</h3>  
5:      <div class="scroll-icon">  
6:        <p>Jump into the last slide</p>  
7:        <a href="#fifthSection/1" class="icon-up-open-big"></a  
8:      </div>  
9:    </section>  
10:    <section class="vertical-scrolling">  
11:      <!-- content here -->  
12:    </section>  
13:    <section class="vertical-scrolling">  
14:      <!-- content here -->  
15:    </section>  
16:    <section class="vertical-scrolling">  
17:      <!-- content here -->  
18:    </section>   
19:    <section class="vertical-scrolling">  
20:      <!-- content here -->  
21:    </section>   
22:  </div>

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

Menciptakan horisontal slide

Masing-masing bagian vertically stacked sections ini opsional dapat horizontal slider dengan satu atau lebih slide. Untuk mengidentifikasi slides, kita menerapkan slide class ke elemen target dan sarang mereka dalam bagian yang sesuai.

Selain itu, sangat penting untuk menyebutkan bahwa, secara teknis, slide pertama sama parent section. Kita akan memeriksa perilaku ini cukup lama! Kembali ke contoh, code snippet di bawah ini menunjukkan bagaimana kita mengatur dua slide dalam bagian kelima:

1:  <section class="vertical-scrolling">  
2:    <div class="horizontal-scrolling">  
3:      <h2>fullPage.js</h2>  
4:      <h3>This is the fifth section and it contains the first slide</h3>  
5:    </div>  
6:    <div class="horizontal-scrolling">  
7:      <h2>fullPage.js</h2>  
8:      <h3>This is the second slide</h3>   
9:      <p class="end">Thank you!</p>  
10:    </div>  
11:  </section>

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

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 background-color 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:

1:  section:nth-of-type(2) {  
2:    background: url('https://unsplash.it/1910/1221?image=626') no-repeat center / cover;  
3:  }

Menyesuaikan pilihan navigasi

Plugin menawarkan banyak built-in options untuk bergerak melalui section dan slide. Beberapa pilihan diaktifkan secara default (misalnya mouse wheel dan keyboard), sementara orang lain secara manual triggered melalui konfigurasi objek (misalnya circle dots).

Dalam proyek ini, kita ingin menambahkan tambahan navigasi dalam bentuk dots. Selain itu, kita memilih untuk menyembunyikan left and right arrows yang biasanya muncul pada slider. Jadi, setelah memungkinkan navigasi dot, kita dapat mengubah penampilan dengan menimpa default styles.

Berikut adalah aturan baru:

1:  #fp-nav ul li a span,   
2:  .fp-slidesNav ul li a span {  
3:    background: white;  
4:    width: 8px;  
5:    height: 8px;  
6:    margin: -4px 0 0 -4px;  
7:  }  
8:  #fp-nav ul li a.active span,   
9:  .fp-slidesNav ul li a.active span,   
10:  #fp-nav ul li:hover a.active span,   
11:  .fp-slidesNav ul li:hover a.active span {  
12:    width: 16px;  
13:    height: 16px;  
14:    margin: -8px 0 0 -8px;  
15:    background: transparent;  
16:    box-sizing: border-box;  
17:    border: 1px solid #24221F;  
18:  }

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

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 kita seperti kita scrolling ke bagian yang berbeda. Untuk melakukannya, kita menggunakan parameter anchors. 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 anchor link berikut (yang harus unik):

1:  anchors: ['firstSection', 'secondSection', 'thirdSection', 'fourthSection', 'fifthSection']

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 kita scroll 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 anchor 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 kita "pertama".

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

<div class="horizontal-scrolling" data-anchor="firstSlide"></div>

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

Menghubungkan menu section dan slide

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

Dan HTML:

1:  <div class="header-top clearfix">  
2:    <h1 class="l-left">  
3:      <a href="#firstSection">Your Logo</a>  
4:    </h1>  
5:    <a class="l-right toggle-menu" href="#">  
6:      <i></i>  
7:      <i></i>  
8:      <i></i>  
9:    </a>  
10:  </div>

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

Berikut adalah kode yang terkait dengan menu ini:

1:  <nav class="hide">  
2:    <ul id="menu">  
3:      <li data-menuanchor="firstSection">  
4:        <a href="#firstSection" title="First Section">First Section</a>  
5:      </li>  
6:      <li data-menuanchor="secondSection">  
7:        <a href="#secondSection" title="Second Section">Second Section</a>  
8:      </li>  
9:      <!-- more list items here -->  
10:    </ul>  
11:  </nav>

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 items kita dengan masing-masing link sebagai values. Sebagai values tersebut cocok, plugin class aktif (seperti yang kita scroll) untuk menambahkan item menu yang sesuai.

Perhatikan bahwa plugin 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:

1:  body.fp-viewing-fifthSection-1 #menu li:last-child a {  
2:    background: #453659;  
3:  }

Lihat hasil di bawah ini:

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

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

Firing Callback untuk Sections

AfterLoadcallback dihentikan setelah load section dan daun onLeave callback sekali pengguna.
Dalam proyek, kita menyembunyikan navigasi vertikal dot ketika bagian kelima dimuat:

Berikut adalah bagaimana kami melakukannya:

1:  afterLoad: function(anchorLink, index) {  
2:    if (index == 5) {  
3:      $('#fp-nav').hide();  
4:    }  
5:  }  
6:  onLeave: function(index, nextIndex, direction) {  
7:    if(index == 5) {  
8:      $('#fp-nav').show();  
9:    }  
10:  }

Firing Callback untuk slides

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

Dalam kasus kita, kita fokus pada slide kedua untuk melakukan sejumlah tindakan yang berbeda Misalnya, begitu slide dimuat kita menonaktifkan kemungkinan untuk scrolling ke atas. Selain itu, kaitamengubah properti background-color dari slide ini serta tampilan elemen-elemen yang menjadi miliknya.

Bagian dari kode yang kita gunakan ditunjukkan di bawah ini:

1:  afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex) {  
2:    if(anchorLink == 'fifthSection' && slideIndex == 1) {  
3:      $.fn.fullpage.setAllowScrolling(false, 'up');  
4:      $(this).css('background', '#374140');  
5:      $(this).find('h2').css('color', 'white');  
6:     $(this).find('h3').css('color', 'white');  
7:      $(this).find('p').css({  
8:        'color': '#DC3522',  
9:        'opacity': 1,  
10:        'transform': 'translateY(0)'  
11:      });  
12:    }  
13:  }  
14:  onSlideLeave: function( anchorLink, index, slideIndex, direction) {  
15:    if(anchorLink == 'fifthSection' && slideIndex == 1) {  
16:      $.fn.fullpage.setAllowScrolling(true, 'up');  
17:    }  
18:  }

Menginisialisasi Plugin

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

1:  $('#fullpage').fullpage({  
2:    sectionSelector: '.vertical-scrolling',  
3:    slideSelector: '.horizontal-scrolling',  
4:    controlArrows: false  
5:    // more options here  
6:  });

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 library animate.css yang sangat baik ke dalam proyek dan cobalah untuk membuat animasi berbasis scroll.
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 single page, silakan berbagi pemikiran Anda dengan kami di komentar di bawah ini! See You Next Time :)

MATA PANDA CREW