×

Cài đặt thư viện FullPage.js trong JavaScript

Avatar of admin
admin 0 Views

FullPage.js là một trong những thư viện JavaScript phổ biến nhất hiện nay cho phép tạo ra các trang web có hiệu ứng cuộn mượt mà và hiện đại. Bài viết này sẽ hướng dẫn bạn cách cài đặt thư viện FullPage.js trong JavaScript từ A đến Z, bao gồm cấu hình cơ bản và các tùy chỉnh mở rộng.

1. Giới Thiệu Về FullPage.js

1.1 FullPage.js Là Gì?

FullPage.js là thư viện JavaScript mã nguồn mở giúp tạo ra các trang web cuộn từng trang một. Nó rất phù hợp cho các dự án website trình diễn sản phẩm, giới thiệu công ty, hoặc thậm chí là blog cá nhân để tạo nên trải nghiệm người dùng độc đáo.

1.2 Tính Năng Nổi Bật Của FullPage.js

  • Cuộn trang mượt mà: Cung cấp các hiệu ứng chuyển cảnh mượt mà giữa các phần của trang web.
  • Tương thích di động: Hỗ trợ đầy đủ trên các thiết bị di động và màn hình nhỏ.
  • Dễ dàng tùy chỉnh: Cho phép tùy chỉnh các tham số như tốc độ cuộn, hướng cuộn, và nhiều hơn thế nữa.
  • Hỗ trợ các hoạt ảnh nâng cao: Tích hợp sẵn nhiều chuyển động và hiệu ứng cho phép làm mới giao diện trang web.

2. Chuẩn Bị Môi Trường

2.1 Cần Thiết Để Cài Đặt

Trước khi bắt đầu, hãy chắc chắn bạn đã có kiến thức cơ bản về HTML, CSS, và JavaScript. Ngoài ra, bạn cần một trình duyệt hiện đại và môi trường phát triển web (VD: VSCode, Sublime Text, hay Atom).

2.2 Tải Về FullPage.js

Bạn có thể tải về FullPage.js từ trang chủ fullpage.js hoặc sử dụng nền tảng quản lý gói như npm.

npm install fullpage.js

Nếu không sử dụng npm, bạn có thể tham khảo liên kết CDN từ trang chủ để tích hợp vào dự án của mình.

3. Tạo Cấu Trúc HTML Cơ Bản

3.1 Tạo Tệp HTML

Bắt đầu bằng việc tạo một tệp HTML cơ bản để liên kết với FullPage.js:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FullPage.js Demo</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css">
  <style>
    section {
      text-align: center;
      font-size: 2em;
    }
  </style>
</head>
<body>
  <div id="fullpage">
    <div class="section">Section 1</div>
    <div class="section">Section 2</div>
    <div class="section">Section 3</div>
    <div class="section">Section 4</div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

3.2 Giải Thích Các Thành Phần

  • Thẻ <head>: Nơi chứa các thông tin về tài liệu, cũng như liên kết tới các tệp CSS của FullPage.js.
  • Thẻ <body>: Nơi chứa nội dung của trang web bao gồm các phần chính được định nghĩa bởi div với lớp section.
  • Liên kết thư viện: Chúng ta sử dụng liên kết CDN để tích hợp FullPage.js và thêm một tệp JavaScript bên dưới để khởi tạo FullPage.js.

4. Khởi Tạo FullPage.js Trong JavaScript

4.1 Tạo Tệp JavaScript

Tạo một tệp JavaScript tên là script.js và thêm đoạn mã sau:

document.addEventListener('DOMContentLoaded', function() {
  new fullpage('#fullpage', {
    autoScrolling: true,
    navigation: true,
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage'],
    navigationTooltips: ['First Page', 'Second Page', 'Third Page', 'Fourth Page'],
    showActiveTooltip: true,
    scrollingSpeed: 1000
  });
});

4.2 Giải Thích Mã JavaScript

  • autoScrolling: Bật chế độ cuộn tự động để người dùng có thể cuộn xuống từng trang bằng cách cuộn chuột.
  • navigation: Hiển thị thanh điều hướng ở bên phải của trang.
  • anchors: Đặt tên các mốc cho từng phần.
  • navigationTooltips: Hiển thị tiêu đề cho mỗi phần khi di chuyển qua thanh điều hướng.
  • showActiveTooltip: Hiển thị Tooltip cho phần đang hiển thị.
  • scrollingSpeed: Đặt tốc độ cuộn là 1000ms (1 giây).

5. Tùy Chỉnh Nâng Cao

5.1 Tùy Chỉnh Hiệu Ứng Chuyển Động

FullPage.js cho phép bạn tùy chỉnh rất nhiều về hiệu ứng và chuyển động. Ví dụ, bạn có thể thêm hiệu ứng fade bằng cách cập nhật các thiết lập:

new fullpage('#fullpage', {
  autoScrolling: true,
  navigation: true,
  anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage'],
  navigationTooltips: ['First Page', 'Second Page', 'Third Page', 'Fourth Page'],
  showActiveTooltip: true,
  scrollingSpeed: 1000,
  fadingEffect: true
});

5.2 Thêm Background Điểm Nổi Bật Cho Mỗi Phần

Bạn có thể thêm hình ảnh nền hoặc màu sắc khác nhau cho mỗi phần để trang web trở nên sinh động hơn:

<style>
  #section1 { background-color: #1E90FF; }
  #section2 { background-color: #FFD700; }
  #section3 { background-color: #32CD32; }
  #section4 { background-color: #FF69B4; }
</style>

<div id="fullpage">
  <div class="section" id="section1">Section 1</div>
  <div class="section" id="section2">Section 2</div>
  <div class="section" id="section3">Section 3</div>
  <div class="section" id="section4">Section 4</div>
</div>

5.3 Thêm Navigation Bar Tuỳ Chỉnh

Để tạo thanh điều hướng cố định và tùy chỉnh:

<div id="menu">
  <ul>
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First Section</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">Second Section</a></li>
    <li data-menuanchor="thirdPage"><a href="#thirdPage">Third Section</a></li>
    <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth Section</a></li>
  </ul>
</div>

Và cập nhật mã JavaScript:

new fullpage('#fullpage', {
  autoScrolling: true,
  navigation: true,
  navigationPosition: 'right',
  anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage'],
  menu: '#menu',
});

6. Kết Luận

FullPage.js là một công cụ mạnh mẽ và linh hoạt giúp bạn tạo ra các trang web hiện đại với hiệu ứng cuộn ấn tượng. Bằng cách thực hiện các bước cơ bản và tuỳ chỉnh nâng cao chúng tôi vừa hướng dẫn, bạn có thể dễ dàng tích hợp và biến hóa FullPage.js theo ý thích của mình. Chúc bạn thành công trong việc tạo ra những website đẹp mắt và mượt mà!

Comments

Bài viết liên quan