Hiệu ứng cuộn trang fullPage.js — là một hiệu ứng cuộn ngang và cuộn dọc, cuộn các chiều, cuộn nhiều kiểu, cuộn 360 độ được viết bằng JavaScript (.js) cực kỳ mượt mà, đi kèm hiệu ứng thị giác cực ngầu, đã được giới thiệu trong bài về các công cụ lập trình và thư viện web.
Giờ đây bạn có thể tái tạo hiệu ứng này ngay trên theme Flatsome của các website WordPress. Flatsome là một theme cực kỳ phổ biến và dễ dàng điều chỉnh trực quan, thuận tiện để làm landing pages hoặc các trang thương mại điện tử, bán hàng.
Trước tiên, bạn hãy tải plugin Simple Custom CSS and JS tại địa chỉ: https://vi.wordpress.org/plugins/custom-css-js
- Bước 1: Sau khi kích hoạt plug in trên, bạn tạo mới mục Custom JS với một tên bất kỳ. Sau đó copy đoạn mã .js bên dưới vào và lưu lại.
➤ Lấy đoạn code .js theo link Google Drive này.
- Bước 2: Thêm một đoạn script nhỏ dưới đây vào mục Flatsome > Advanced -> Footer Scripts của theme Flatsome.
<script type="text/javascript">
var myFullpage = new fullpage('.fullpage', { verticalCentered: false });
</script>
- Bước 3: Hãy tạo 1 trang có hiệu ứng fullPage với định dạng trang là Full – Width. Mở edit bằng UX Builder và thiết lập các Block theo ý mình.
➤ Lưu ý: Bạn nên đặt ảnh cho từng section và chỉnh min-height cho section là 600px.
- Bước 4: Đặt tên class cho mục Row là fullpage. Nhấn Update và tận hưởng thành quả.
