Website 24/08/2020
Tự làm bộ lọc nội dung với Animate.css và jQuery
Bài viết này hướng dẫn tự làm bộ lọc nội dung đơn giản sử dụng jQuery với rất nhiều hiệu ứng từ Animate.css. Có thể áp dụng để làm trang Portfolio.
Bài viết sử dụng:
Tham khảo dịch vụ thiết kế website của chúng tôi.
Thiết Kế Website
Website thu hút thêm nhiều khách hàng với chi phí thấp, giúp đẩy mạnh hoạt động bán hàng mọi lúc mọi nơi, triển khai các chiến lược marketing hiệu quả và đặc biệt là nâng tầm uy tín, giá trị thương hiệu và giảm chi phí kinh doanh.
Giao diện hiện đại
Hoạt động ổn định
Tối ưu hóa công cụ tìm kiếm
Tối ưu trải nghiệm người dùng
HTML
Trước tiên, ở đây mình chọn Bootstrap 3 mục đích để chia cột, jQuery mình chọn 1.12.4 và Animate.css 4.1.0.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Bạn cũng có thể không dùng Bootstrap nếu muốn vì đây chỉ là phần giao diện. Cấu trúc của nội dung cần lọc như sau.
<ul class="nav nav-pills filter-link m-b-30"> <li><a href="#" data-filter="1">Nhóm 1</a></li> <li><a href="#" data-filter="2">Nhóm 2</a></li> <li><a href="#" data-filter="3">Nhóm 3</a></li> </ul> <div class="item-list"> <div class="item-child m-b-30 col-md-2 animate__animated" data-group="1"><a href="#"><img src="img/tranh (1).jpg" alt="Tranh 1"></a></div> <div class="item-child m-b-30 col-md-2 animate__animated" data-group="1"><a href="#"><img src="img/tranh (2).jpg" alt="Tranh 2"></a></div> <div class="item-child m-b-30 col-md-2 animate__animated" data-group="1"><a href="#"><img src="img/tranh (3).jpg" alt="Tranh 3"></a></div> <div class="item-child m-b-30 col-md-2 animate__animated" data-group="1"><a href="#"><img src="img/tranh (4).jpg" alt="Tranh 4"></a></div> <div class="item-child m-b-30 col-md-2 animate__animated" data-group="1"><a href="#"><img src="img/tranh (5).jpg" alt="Tranh 5"></a></div> <div class="item-child m-b-30 col-md-2 animate__animated" data-group="2"><a href="#"><img src="img/tranh (6).jpg" alt="Tranh 6"></a></div> <div class="item-child m-b-30 col-md-2 animate__animated" data-group="2"><a href="#"><img src="img/tranh (7).jpg" alt="Tranh 7"></a></div> <div class="item-child m-b-30 col-md-2 animate__animated" data-group="2"><a href="#"><img src="img/tranh (8).jpg" alt="Tranh 8"></a></div> <div class="item-child m-b-30 col-md-2 animate__animated" data-group="2"><a href="#"><img src="img/tranh (9).jpg" alt="Tranh 9"></a></div> <div class="item-child m-b-30 col-md-2 animate__animated" data-group="2"><a href="#"><img src="img/tranh (10).jpg" alt="Tranh 10"></a></div> <div class="item-child m-b-30 col-md-2 animate__animated" data-group="3"><a href="#"><img src="img/tranh (11).jpg" alt="Tranh 11"></a></div> <div class="item-child m-b-30 col-md-2 animate__animated" data-group="3"><a href="#"><img src="img/tranh (12).jpg" alt="Tranh 12"></a></div> <div class="item-child m-b-30 col-md-2 animate__animated" data-group="3"><a href="#"><img src="img/tranh (13).jpg" alt="Tranh 13"></a></div> <div class="item-child m-b-30 col-md-2 animate__animated" data-group="3"><a href="#"><img src="img/tranh (14).jpg" alt="Tranh 14"></a></div> <div class="item-child m-b-30 col-md-2 animate__animated" data-group="3"><a href="#"><img src="img/tranh (15).jpg" alt="Tranh 15"></a></div> </div>
jQuery
Đầu tiên mình lưu tất cả nội dung vào một biến, sau đó dùng sự kiện bấm vào liên kết để lọc theo thuộc tính data-group.
<script type="text/javascript">
$(document).ready(function() {
// Lấy tất cả item-child
var items = [];
$('.item-list .item-child').each(function() {
items.push('<div class="animate__zoomOutDown ' + $(this).attr('class') + '" data-group="' + $(this).data('group') + '">' + $(this).html() + '</div>');
});
// Sự kiện khi bấm vào bộ lọc
$('.filter-link a').click(function (e) {
e.preventDefault();
var group = $(this).data('filter');
$('.item-list .item-child').addClass('animate__faster animate__zoomOutDown');
$('.item-list .item-child').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
$('.item-list').html(''); // Làm trống nội dung
// Lấy kết quả
var result = '';
for (var i = 0; i < items.length; i++) {
if (items[i].includes('data-group="' + group + '"')) {
result += items[i];
}
};
$('.item-list').html(result);
$('.item-list .item-child').removeClass('animate__zoomOutDown').addClass('animate__fadeInUp');
});
});
});
</script>Các hiệu ứng bạn có thể chọn tại Animate.css.
Chúc các bạn thành công!
