Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Sử dụng pagePiling.js

Sử dụng pagePiling.js


Ngày 10 Tháng 2 Năm 2020

Sử dụng pagePiling.js

Xin chào các bạn quay lại blog của mình. Hôm nay mình sẽ giới thiệu một ứng dụng Jquery có tên là pagePiling.js giúp chúng ta có thể cuộn từng phần của một trang web. Để hiểu rõ hơn các bạn cùng mình tìm hiểu nhé!

pagePiling.js

Đi vào bước thứ nhất các bạn tạo một thư mục có cấu trúc file như sau nhé:

Cấu trúc Thư Mục PagePiling

Sau khi đã tạo xong cấu trúc thư mục thì bước tiếp theo là các bạn tải những hình ảnh cần thiết và 2 file jquery.pagepiling.min.js và jquery.pagepiling.css mà mình đã nén và để ở đường dẫn bên dưới. Các bạn có thể sử dụng tùy ý hình nha miễn sao chất lượng đừng quá thấp vì xíu nữa chúng ta sẽ thiết lập ảnh toàn màn hình làm cho ảnh có thể bể dẫn đến xấu trang web của bạn.
Tải File PagePiling

Các bạn có thể tải bản đầy đủ hoặc tham khảo thêm ở: Đường dẫn tới trang PagePiling

Bây giờ mình sẽ tạo cấu trúc file HTML, thêm các thẻ HTML cần thiết cho trang_chinh.html sau đó liên kết nó với file style.css, jquery.pagepiling.min.js và jquery.pagepiling.css. Các bạn lưu ý là đường dẫn style.css lúc nào cũng nằm dưới cùng trong thẻ <head> trong một trang HTML bởi vì khi ta chỉnh sửa CSS thì nó sẽ không bị ảnh hưởng bởi các file CSS khác. Để nắm rõ hơn các bạn theo dõ đoạn code dưới đây nhé:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sử dụng PagePilling.js</title>
    <link rel="stylesheet" href="jquery.pagepiling.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="ung_dung_pagepiling">
        <div class="section section1">
            <h2>Việt Nam</h2>
        </div>
        <div class="section section2">
            <h2>Nhật Bản</h2>
        </div>
        <div class="section section3">
            <h2>Trung Quốc</h2>
        </div>
        <div class="section section4">
            <h2>Thái Lan</h2>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.js"  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
    <script src="jquery.pagepiling.min.js"></script>
</body>

Tiếp theo việc cần làm là chúng ta sẽ gọi ứng dụng pagePiling bằng cách chèn đoạn script dưới đây vào trang_chinh.html. Các bạn lưu ý một chỗ là cũng như trên để sử dụng được ứng dụng thì mình cần đặt nó nằm dưới <script src="jquery.pagepiling.min.js"></script>. Bây giờ các bạn cùng xem đoạn code sau để nắm rõ hơn nhé:

<script>
    $(document).ready(function () {
        $('#ung_dung_pagepiling').pagepiling()
    });
</script>

Chúng ta hãy cùng xem kết quả của đoạn code trên nhé:

Một vấn đề phát sinh là các chữ đang đè lên nhau vì vậy chúng ta cần vào trang style.css để chỉnh lại một chút CSS và thêm hình nền vào các phần của trang, chỉnh lại font, kích cỡ, màu sắc chữ... Nghe hơi khó hiểu để dễ hình dung các bạn xem đoạn code sau đây nhé:

*{
    margin:0;
    padding:0;
}
#ung_dung_pagepiling .section{
    text-align: center;
}
#ung_dung_pagepiling .section h2{
    color:#fff;
    font-size: 10em;
    text-shadow: 0 5px 15px rgba(0,0,0,.5);
}
#ung_dung_pagepiling .section.sec1{
    background: url(hinh_1.jpg);
    background-size: cover;
}
#ung_dung_pagepiling .section.sec2{
    background: url(hinh_2.jpg);
    background-size: cover;
}
#ung_dung_pagepiling .section.sec3{
    background: url(hinh_3.jpg);
    background-size: cover;
}
#ung_dung_pagepiling .section.sec4{
    background: url(hinh_4.jpg);
    background-size: cover;
}

Cùng mình xem kết quả của đoạn code trên:

Ứng dụng pagePiling có cung cấp cho chúng ta một số thuộc tính giúp dễ tùy chỉnh cho trang web hơn. Bây giờ mình sẽ thêm một thuộc tính là navigation để chỉnh màu sắc chữ, tiêu đề cho từng phần trên thanh điều hướng bằng cách thêm vào đoạn script ở trên. Để hiểu rõ các bạn xem đoạn code sau đây nhé:

<script>
    $(document).ready(function () {
        $('#ung_dung_pagepiling').pagepiling({
            navigation: {
            'textColor': '#fff',
            'bulletsColor': '#fff',
            'position': 'right',
            'tooltips': ['Hình Ảnh Việt Nam', 'Hình Ảnh Nhật Bản', 'Hình Ảnh Trung Quốc', 'Hình Ảnh Thái Lan']
            }
        });
    });
</script>

Và đây là kết quả của đoạn code bên trên nhé:

Mình chỉ giới thiệu những điều cơ bản của ứng dung pagePiling này. Thật ra nó còn có rất nhiều thuộc tính các bạn có thể tìm hiểu thông qua đường link mà mình để bên dưới nhé!

Mình gửi các bạn đường dẫn để tải về những file trong thư mục pagePiling để bạn đễ hình dung và có thể xem lại!
Đường dẫn tải File Source Code

Các bạn có thể tìm hiểu thêm thông qua đường dẫn dưới đây nhé!
Đường dẫn để bạn tìm hiểu thêm

Tổng kết:

Qua đây mình giúp các bạn có thể làm sinh động cũng như sáng tạo hơn với trang web của mình và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!