Tạo hiệu ứng mờ dần khi rê chuột vào ảnh bằng JQuery cho Blogspot

Thỉnh thoảng khi lướt qua 1 số web/blog bạn thấy một hiệu ứng ảnh cũng khá thú vị đó là hiệu ứng làm mờ dần ảnh khi bạn rê chuột vào hình ảnh đó. Hiệu ứng này không đơn giản sử dụng thuộc tính opacity mà ở đây chúng ta sử dụng thư viện JQuery sẽ tạo nên một hiệu ứng thú vị hơn nhiều. Ở đây mình sẽ chia sẻ cho bạn 1 đoạn code nhỏ để có thể tạo hiệu ứng này cho Blogspot của mình khá dễ dàng.

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào trước thẻ </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".post img").fadeTo("slow", 1.0); // Độ mờ ban đầu của ảnh trước khi rê chuột (1.0 tức ảnh rỏ nhất, 0 là mờ nhất)
$(".post img").hover(function(){
$(this).fadeTo("slow", 0.3); // Độ mờ của ảnh khi rê chuột vào
},function(){
$(this).fadeTo("slow", 1.0); // Độ mờ của ảnh khi không còn rê chuột vào ảnh
});
});
</script>

Ở trên chỉ là tạo hiệu ứng cho các hình ảnh ở trang bài viết của Blogspot, nếu bạn muốn tạo hiệu ứng cho các ảnh thuộc class nào đó thì chỉ việc thay đổi .post thành class ban muốn tạo hiệu ứng là được.

Ngoài việc tạo hiệu ứng làm mờ ảnh như trên thì chúng ta hoàn toàn có thể áp dựng ngược lại hiệu ứng này, tức là ban đầu chúng ta sẽ để hình ảnh dạng mờ và khi rê chuột vào hình ảnh sẽ rỏ hơn vẫn hiệu ứng đẹp mắt đấy. Bạn chỉ cần thay đổi thông số ở bên trên là được. Ví dụ thay 0.3 thành 1.0 và ngược lại 1.0 thành 0.3. 

5. Cuối cùng save template lại.

Bạn hoàn toàn có thể tự mình mày mò và tọa thêm hiệu ứng mà mình thấy ưng ý cho hình ảnh trên blog của mình nhé.


Chúc bạn thành công
!