Bài 18: Tạo hiệu ứng Gallary filter bằng jQuery

0

Trong bài học này, mình sẽ hướng dẫn tạo hiệu ứng Gallary filter bằng jQuery. Ngoài ra, mình sẽ giới thiệu 2 cách lấy thuộc tính trong thẻ html bằng jQuery.

Video – Tạo hiệu ứng Gallary filter bằng jQuery

Ý tưởng

+ Để thuộc tính type hoặc data-type. type là thuộc tính tự đặt, bạn có thể đặt là loai, category …

+ Dùng jQuery để lấy dữ liệu từ thuộc tính tyoe trong hình và lấy thuộc tính trong nút

+ Những hình nào có type trùng với thuộc tính trong nút thì không đổi. Còn lại sẽ ẩn đi.

+ Để tiết kiệm thời gian code css, dùng thư viện animate.css để làm hiệu ứng.

Hướng dẫn thực hiện

Phần HTML

Thêm thư viện jQuery và animate.css là bắt buộc, mình không để trong code trích dẫn nhé.

<ul class="menu">
   <li data-type="type1">Loại 1</li>
   <li data-type="type2">Loại 2</li>
   <li data-type="type3">Loại 3</li>
   <li data-type="type4">Loại 4</li>
   <li data-type="all">Tất cả</li>
</ul>
<h1 class="title">Tất cả</h1>
<div class="content">
   <img class="type1 all" src="img/1.png">
   <img class="type2 all" src="img/2.png">
   <img class="type3 all" src="img/3.png">
   <img class="type4 all" src="img/4.png">
   <img class="type1 all" src="img/5.png">
   <img class="type2 all" src="img/6.png">
   <img class="type3 all" src="img/7.png">
   <img class="type4 all" src="img/8.png">
</div>

Cách Bạn có thể dùng thuộc tính type cho các li menu

<ul class="menu">
   <li type="type1">Loại 1</li>
   <li type="type2">Loại 2</li>
   <li type="type3">Loại 3</li>
   <li type="type4">Loại 4</li>
   <li type="all">Tất cả</li>
</ul>

Phần CSS

Mình sẽ chỉnh đôi chút cho đẹp nhé.

ul.menu {
   width: 800px;
   display: flex;
   justify-content: space-around;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;
}
ul.menu li {
   list-style: none;
   padding: 10px 12px;
   font-size: 20px;
   color: #212121;
   background: #ffffff;
   box-shadow: 2px 5px 5px rgb(0,0,0,0.2);
   cursor: pointer;
}
.content {
   width: 1200px;
   margin: auto;
}
.content img {
   width: 22%;
   margin: 10px;
   float: left;
}
h1.title{
   text-align: center;
}
.hidden{
   opacity: 0;
   visibility: hidden;
   display: none;
}

Phần JS

Xử lý như ý tưởng và dùng animate.css để làm hiệu ứng nhé.

jquery cung cấp hàm data() để lấy dữ liệu từ các thuộc tính có dạng data-type

$(document).ready(function() {
   $('ul.menu li').click(function(event) {
      // var _type = $(this).attr('type');
      var _type = $(this).data('type');
      var _title = $(this).text(); // lấy text từ thẻ
      console.log(_type);
      $('h1.title').text(_title); // thêm text vào thẻ
      $('.content img').each(function() {
         if($(this).hasClass(_type)){
            $(this).removeClass('hidden');
            $(this).addClass('bounceInUp animated');
         }else {
            $(this).addClass('hidden');
            $(this).removeClass('bounceInUp animated');
         }
      });
   });
});

Nếu bạn dùng cách 2 thay thuộc tính data-type bằng type, bạn dùng hàm attr() để lấy dữ liệu từ thuộc tính (attribute).

Code mẫu: Download

Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Liên hệ

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.