Cuộn ngang và cuộn dọc với fullPage.js

() translation by (you can also view the original English article)

Ngày nay càng nhiều trang được thiết kế dựa trên cách tiếp cận đơn-trang (hay còn gọi là các trang web đơn-trang hoặc một-trang) Trong bài viết này, chúng tôi sẽ khám phá cách để tạo ra những trải nghiệm như vậy cho một trang demo bằng cách tận dụng các tiện ích của fullPage.js.

Hãy xem qua những gì chúng ta sẽ làm tại trang demo trên Codepen. Thêm vào đó, tất cả tập tin cho trang demo này có thể tìm thấy được ở kho Github này.

fullPage.s là gì?

fullPage.js là một tiện ích (plugin) dựa trên jQuery, cho phép chúng ta xây dựng những trang web cuộn đơn-trang. Được tạo ra bởi nhà phát triển web Alvaro Trigo, như chúng ta sẽ thấy trong phần sắp tới, nó đi kèm với một số lựa chọn tùy biến khác nhau.

Thêm vào đó, plugin này cung cấp một tài liệu hướng dẫn rất có ích với rất nhiều ví dụ trực tiếp.

Tuyệt hơn nữa là nó hoạt động tốt không chỉ trên tất cả các trình duyệt hiện đại, mà còn trên một vài trình duyệt cũ hơn như IE 8 và Opera 12.

Cuối cùng, bạn có lẽ sẽ muốn xem qua phiên bản dành cho Wordpress của nó.

Hãy bắt đầu với fullPage.js

Để bắt đầu với fullPage, bạn phải tải xuống và cài đặt những tập tin sau vào dự án của bạn:

Thư viện jQuery (≥1.6.0)
Tập tin CSS jquery.fullPage.css
Tập tin JS jquery.fullPage.js hoặc phiên bản rút gọn của nó (jquery.fullPage.min.js)

Bạn có thể làm một bản sao chép của những tập tin này bằng cách ghé qua kho Github, hoặc sử dụng gói quản lý (ví dụ: Bower), hoặc tải những vật liệu cần thiết thông qua một CDN (ví dụ: cdnjs). Trong bài hướng dẫn này, chúng tôi sẽ chọn cách cuối.

Chèn 1 link tới tập tin CSS giữa tag <head></head> trong tập tin HTML của bạn.

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

... và các script JS trước tag đóng </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>

Bây giờ, chúng ta đã sẵn sàng để tìm hiểu sâu hơn về plugin này!

Tạo các thành phần (section) toàn màn hình

Đầu tiên, chúng ta phải xác định các section cho trang web của chúng ta. Để làm việc này, chúng ta gán lớp (class) cho các section để xác định mục tiêu các thành phần và đặt chúng trong một container có một định danh duy nhất (id). Sau đó, id này sẽ được sử dụng để thể hiện cho fullPage.

Mặc định là plugin này sẽ coi section đầu tiên là section mặc định được hiển thị trước nhất. Nhưng, nếu chúng ta muốn, chúng ta có thể thay đổi mặc định này bằng các thêm class active vào section mà chúng ta muốn.

Đây là cấu trúc HTML bắt buộc cho ví dụ của chúng ta:

<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>

Cần chú ý rằng tất cả section cùng sử dụng một class (ví dụ: vertical-scrolling) mà chúng ta đã chọn và nó phải khác với class đã được xác định trước đó (ví dụ: section). Trong trường hợp này, chúng ta cần thông báo cho plugin biết về sự thay đổi này trong quá trình khởi tạo.

Tạo các slide cuộn ngang

Mỗi section trong những section cố định theo chiều dọc có thể là 1 slider cuộn ngang với một hay nhiều slide. Để định danh các slide, chúng ta sẽ áp dụng class slides vào các thành phần mục tiêu và lồng chúng vào trong các section tương ứng.

Hơn nữa, về mặt kĩ thuật, slide đầu tiên sẽ ngang hàng với section cha, điều này là rất quan trọng. Chúng ta sẽ kiểm tra điều này sớm thôi!

Trở lại các ví dụ của chúng ta, đoạn code phía dưới sẽ cho chúng ta thấy làm sao để đặt 2 slide vào trong section thứ 5.

<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>

Một lần nữa, như bạn có thể thấy, chúng ta đặt cho các slide này một class (ví dụ: horizontal-scrolling).

Điều khiển sự hiển thị của trang

Chúng ta có thể điều khiển sự hiển thị của các section và các slide bằng các sử dụng các thông số cấu hình sẵn. Một trong số những thông số này là thuộc tính sectionColor sẽ cho chúng ta một cách dễ dàng để xác định thuộc tính CSS background-color cho mỗi section.

Hơn thế nữa, chúng ta có thể thiết lập rất nhiều thứ để tùy biến thành style riêng cho trang web của chúng ta. Ví dụ, hãy tưởng tượng rằng chúng ta muốn áp dụng một hình ảnh để làm hình nền cho section thứ hai. Đây là cách chúng ta có thể làm được điều đó:

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

Chỉnh sửa các tùy chọn của thanh điều hướng

Plugin cung cấp rất nhiều các tùy chọn bên trong cho việc di chuyển giữa các section và các slide. Một số tùy chọn được kích hoạt mặc định (ví dụ: giả lập cuộn bằng chuột và bàn phím), trong khi số khác được tùy chỉnh thủ công thông qua các đối tượng được cấu hình (ví dụ: các chấm tròn).

Trong dự án này, chúng ta muốn thêm vào một thanh điều hướng bổ sung với thiết kế như các chấm tròn. Thêm vào đó, chúng ta chọn cách ẩn các mũi tên chỉ hướng bên trái và phải, vì chúng xuất hiện mặc định trên slider của chúng ta. Vì thế, sau khi bật thanh điều hướng kiểu chấm tròn, chúng ta có thể thay đổi sự hiển thị của nó bằng cách ghi đè lên style mặc định. Đây là các luật mới chúng ta sẽ thêm vào:

#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;
}

Và bên dưới là ảnh xem trước những thay đổi chúng ta đã tạo ra:

default vs custom styles — Style mặc định, so với style tùy chỉnh

Hãy ghi chú rằng chúng ta sẽ chèn các luật ở trên trong bản thiết kế (stylesheet) tùy chỉnh riêng của chúng ta, do sẽ tránh được việc thay đổi tập tin CSS của plugin.

Tạo Liên kết tới các Section và các Slide

fullPage.js cho phép chúng ta thay đổi URL của trang web khi chúng ta cuộn trang qua các section khác nhau. Để làm điều này, chúng ta sử dụng tham số anchors. Đặc biệt hơn, thông số này là một mảng chứa các liên kết anchor cần được hiển thị trên URL cho mỗi section. Ví dụ, chúng ta xác định các link anchor sau (phải là duy nhất):

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

Vậy là xong, khi chúng ta đang ở trên section đầu tiên, URL của trang sẽ chứa id #firstSection ở cuối, trên section thứ hai thì URL sẽ kết thúc với id #secondSection và cứ thế tương tự cho các section khác.

Tương tự như vậy, plugin cũng tùy biến URL trong khi chúng ta cuộn qua các slide. Lúc này, chúng ta phải gọi lại một cách cơ bản slide đầu tiên (có chỉ số index là 0) là section cha có liên quan. Với điều đó, trong dự án này khi chúng ta đang ở slide đầu tiên của section thứ năm, URL sẽ kết thúc với liên kết anchor là #fifthSection. Tải slide thứ hai trên cùng một section sẽ kích hoạt một URL có đuôi là #fifthSection/1 vì slide thứ hai (có chỉ số indeex là 1) mới thật sự là slide "đầu tiên" của chúng ta.

Chúng ta có thể chỉnh sửa anchor cho các slide của chúng ta bằng cách thêm thuộc tính data-anchor cho chúng với tên anchor mình muốn (cũng phải là duy nhất cho từng anchor), giống như ví dụ dưới đây:

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

Chú ý: Để thxem các URL thay đổi khi bạn cuộn trang, hãy xem qua Debug View trên trang demo của chúng ta.

Liên kết các Menu tới các Section và các Slide

Để hiểu rõ hơn làm sao chúng ta có thể liên kết một menu với fullPage, hãy xem qua header cố định của chúng ta. Ảnh xem trước ở dưới cho thấy nó hiển thị như thế nào:

và đây là code 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>

Ngay khi icon menu hình bánh hamburger được kích hohạt, menu chính sẽ xuất hiện đè lên:

Đây là đoạn code của menu này:

<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>

Vì thế, để fullPage biết về menu này, chúng ta phải đăng kí nó bằng cách sử dụng thuộc tính thiết lập menu. Tiếp theo chúng ta cần liên kết các mục của menu với các section thích hợp. Để làm việc này, chúng ta thêm thuộc tính data-menuanchor vào các mục menu của chúng ta với các liên kết tương ứng như các giá trị. Ngay khi các giá trị khớp nhau, plugin gắn các class active (như khi chúng ta cuộn trang) vào các mục menu tương ứng.

Chú ý rằng plugin chưa gắn class active vào các slide. Để sửa việc này, chúng ta có thể sử dụng jQuery (giải pháp tốt nhất) hoặc CSS. Trong ví dụ của chúng ta, chúng ta giải quyết vấn về này bằng cách thêm đoạn code CSS sau:

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

Xem kết quả phía dưới:

Trong thực tế, chúng ta đã không thêm class active vào slide thứ hai. Bằng cách lợi dụng các class body khác nhau mà plugin gắn vào mỗi section và slide, chúng ta chỉ đơn thuần gán cho mục này các style của class active.

Lưu ý: Chúng ta không tập trung thêm vào cách menu này hoạt động như thế nào vì nó vượt ra ngoài phạm vi của bài hướng dẫn này.

Firing Callbacks cho các Section

Callback afterLoad được gọi mỗi lần khi một section được tải và callback onLeave khi người dùng rời khỏi nó.

Trong dự án của chúng ta, chúng ta ẩn thanh điều hướng dọc kiểu chấm khi section thứ năm được tải:

Section4, sau đó là Section5 sẽ không hiện chấm nào nữa

Đây là cách chúng ta làm được điều đó:

afterLoad: function(anchorLink, index) {
    if (index == 5) {
        $('#fp-nav').hide();
    }
}

onLeave: function(index, nextIndex, direction) {
    if(index == 5) {
        $('#fp-nav').show();
    }
}

Firing Callbacks cho các Slide

Callback afterSlideLoad được kích hoạt khi 1 slide được tải và callback onSlideLeave khi người dùng rời khỏi nó.

Trong trường hợp của chúng ta, chúng ta tập trung vào slide thứ hai để thực hiện một số hành động khác nhau. Ví dụ, một khi slide được tải chúng ta hủy khả năng cuộn lên của trang. Thêm vào đó, chúng ta thay đổi thuộc tính background-color của slide này cũng như sự xuất hiện của các thành phần thuộc nó.

Phần đoạn code chúng ta sử dụng hiển thị dưới đây:

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');
    }
}

Khởi tạo Plugin

Đây là bước bắt buộc cuối cùng để kích hoạt các chức năng của fullPage. Đến đây, chúng ta bước qua một phần của tất cả các phản tùy chỉnh của chúng ta. Xem đoạn code thích hợp phía dưới:

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

Kết luận

Trong bài hướng dẫn này, chúng ta đã khám phá nhanh qua jQuery plugin fullpage.js và học được cách xây dựng một trang web toàn-trang và có đáp ứng tốt với nhiều trường hợp. Có điều quan trọng bạn phải hiểu rằng kiểu trang web này không phải lúc nào cũng tiện lợi và thích hợp trong mọi trường hợp. Bên cạnh thiết kế hấp dẫn của chúng, chúng có thể gặp nhiều hạn chế và công việc bảo trì có thể gặp khó khăn, đặc biệt là với các trang web động. Thêm nữa, định dạng này có thể gây ra những phiền toái cho việc SEO.

Các bước tiếp theo

Nếu bạn muốn sử dụng trang demo như là cơ sở cho các thử nghiệm với plugin, tôi khuyến nghị các điều sau đây:

Kết hợp với các thư viện xuất sắc như animate.css vào dự án và cố gắng để tạo ra hiệu ứng động khi cuộn trang.
Sử dụng kiến thức jQuery của bạn để kích hoạt class active cho slide thứ hai (xem mục Liên kết Menu với các Section và Slide).

Cuối cùng, nếu bạn có bất kì kinh nghiệm nào với những trang web đơn-trang, hãy thoải mái chia sẻ suy nghĩ của bạn với chúng tôi trong các bình luận phía dưới!