Tạo hiệu ứng chuyển tiếp hình ảnh trên bài đăng trong blogspot

Chào mừng các bạn đã đến với blog của mình,hôm nay mình sẽ chia sẻ đến các bạn hiệu ứng chuyển tiếp hình ảnh khá đẹp trong phần ài đăng của blog.Hiệu ứng này phù hợp với những blogspot tin tức,chia sẻ ảnh,cá nhân,...

Demo

Các bước thực hiện:

Bước 1:Phải chắc chắn rằng blogspot của bạn đã có thư viện jquery,nếu như bạn lo lắng về việc nó sẽ làm giảm tốc độ tải trang của blog bạn thì bạn cần biết rằng hầu hết những template blogspot hiện giờ(trừ những giao diện mặc định) thì đều sử dụng thư viện jquery.Tôi sẽ không hướng dẫn các bạn về việc thêm thư viện jquery nữa vì nó có đầy dẫy trên google

Bước 2:thêm đoạn mã này vào bên dưới thẻ </head>

<b:if cond='data:blog.pageType != "index"'>
<style type='text/css'>
.dienblogger .post-body img{opacity:0;transition:all .6s ease;transform:scale(.95) translateY(20px)}.dienblogger .post-body img.anime{opacity:1;transform:scale(1) translateY(0)}
</style>
</b:if>

Bước 3:thêm đoạn mã này vào bên dưới thẻ </body>

<b:if cond='data:blog.pageType != "index"'>
<script type='text/javascript'>
//<![CDATA[
// Image Transition
var scroll="yes",Fscroll=scroll.replace(/(\r\n|\n|\r)/gm," ");"yes"===Fscroll&&($(document).ready(function(){$("body").addClass("dienblogger")}),$(window).bind("load resize scroll",function(){var o=$(this).height();$(".post-body img").each(function(){var s=.1*$(this).height()-o+$(this).offset().top;$(document).scrollTop()>s&&$(this).addClass("anime")})}));
//]]>
</script>
</b:if>

Lời kết:

Chỉ với một vài thao tác là bạn đã có thể cài đặt một hiệu ứng chuyển tiếp hình ảnh tuyệt vời trên blogspot của bạn rồi,chúc bạn thành công
Thao khảo:Arlina Design