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.cssCSS file
-
Jquery.fullPage.js jsfile atau versi minified (yaitujquery.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>
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> <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:
<div id="fullPage">
<section class="vertical-scrolling">
<h2>fullPage.js</h2>
<h3>This is the first section</h3>
<div class="scroll-icon">
<p>Jump into the last slide</p>
<a href="#fifthSection/1" class="icon-up-open-big"></a
</div>
</section>
<section class="vertical-scrolling">
<!-- content here -->
</section>
<section class="vertical-scrolling">
<!-- content here -->
</section>
<section class="vertical-scrolling">
<!-- content here -->
</section>
<section class="vertical-scrolling">
<!-- content here -->
</section>
</div>
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:
<section class="vertical-scrolling">
<div class="horizontal-scrolling">
<h2>fullPage.js</h2>
<h3>This is the fifth section and it contains the first slide</h3>
</div>
<div class="horizontal-scrolling">
<h2>fullPage.js</h2>
<h3>This is the second slide</h3>
<p class="end">Thank you!</p>
</div>
</section>
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:
section:nth-of-type(2) {
background: url('https://unsplash.it/1910/1221?image=626') no-repeat center / cover;
}
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:
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
background: white;
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
background: transparent;
box-sizing: border-box;
border: 1px solid #24221F;
}
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 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):
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 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:
<div class="header-top clearfix">
<h1 class="l-left">
<a href="#firstSection">Your Logo</a>
</h1>
<a class="l-right toggle-menu" href="#">
<i></i>
<i></i>
<i></i>
</a>
</div>
Selama sebagai ikon menu hamburger dipicu, tampilan menu utama muncul:
Berikut adalah kode yang terkait dengan menu ini:
<nav class="hide">
<ul id="menu">
<li data-menuanchor="firstSection">
<a href="#firstSection" title="First Section">First Section</a>
</li>
<li data-menuanchor="secondSection">
<a href="#secondSection" title="Second Section">Second Section</a>
</li>
<!-- more list items here -->
</ul>
</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 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:
body.fp-viewing-fifthSection-1 #menu li:last-child a {
background: #453659;
}
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:
Berikut adalah bagaimana kami melakukannya:
afterLoad: function(anchorLink, index) {
if (index == 5) {
$('#fp-nav').hide();
}
}
onLeave: function(index, nextIndex, direction) {
if(index == 5) {
$('#fp-nav').show();
}
}
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:.
afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex) {
if(anchorLink == 'fifthSection' && slideIndex == 1) {
$.fn.fullpage.setAllowScrolling(false, 'up');
$(this).css('background', '#374140');
$(this).find('h2').css('color', 'white');
$(this).find('h3').css('color', 'white');
$(this).find('p').css({
'color': '#DC3522',
'opacity': 1,
'transform': 'translateY(0)'
});
}
}
onSlideLeave: function( anchorLink, index, slideIndex, direction) {
if(anchorLink == 'fifthSection' && slideIndex == 1) {
$.fn.fullpage.setAllowScrolling(true, 'up');
}
}
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:
$('#fullpage').fullpage({
sectionSelector: '.vertical-scrolling',
slideSelector: '.horizontal-scrolling',
controlArrows: false
// more options here
});
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
mengaktifkankelas 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!
