Hiệu ứng chuyển tiếp trong bài đăng Ảnh . Cách thức hoạt động gần giống như trong bài Tăng tốc tải Blog tức là nội dung sẽ xuất hiện khi chúng tôi cuộn trang xuống. Đối với những người bạn muốn cài đặt nó, phương pháp này khá dễ dàng. V ui lòng làm theo
Tips Blogspot đầu tiên từ ngocgn90 vào đầu năm 2019. Tạo hiệu ứng cho việc đăng ảnh
Như thường lệ, mở trang
Blogger > Nhấp vào menu
Chủ đề và nhấp vào nút
Chỉnh sửa HTML > Thêm mã CSS này trước
</Head>
<b:if cond='data:blog.pageType != "index"'>
<style type='text/css'>
.imgani .post-body img{opacity:0;transition:all .6s ease;transform:scale(.95) translateY(20px)}.imgani .post-body img.anime{opacity:1;transform:scale(1) translateY(0)}
</style>
</b:if>
Chú ý: Đối với những người muốn sử dụng các hiệu ứng chuyển tiếp khác, bạn có thể mở liên kết này Danh sách các
Hiệu ứng chuyển đổi CSS hoặc
Hoạt hình CSS
Tiếp theo thêm mã sau
</body>
<b:if cond='data:blog.pageType != "index"'>
<script type='text/javascript'>
var scroll="yes",Fscroll=scroll.replace(/(\r\n|\n|\r)/gm," ");"yes"===Fscroll&&($(document).ready(function(){$("body").addClass("imgani")}),$(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>
Sau đó nhấp vào nút
Lưu chủ đề và kết thúc
Không chỉ giới hạn trong việc tạo hiệu ứng cho các bức ảnh đăng tải, bạn cũng có thể sửa đổi và tạo hiệu ứng cho các phần khác của mẫu. Ở lại được tạo lại khi cần thiết, ví dụ như thế này.
Và phiên bản này có một chút khác biệt, hiệu ứng chuyển tiếp vẫn sẽ chạy khi cuộn trang lên và xuống.
Thêm mã CSS này trước
</head>
<style type='text/css'>
.come-in{perspective:200px;animation:hago 0.8s ease forwards}
.already-visible{left:0;animation:none}
@keyframes hago{from{opacity:.5;transform:scale(0.8)}to{opacity:1;transform:scale(1.0)}}
</style>
Tiếp theo thêm mã sau
</body>
<script type='text/javascript'>
!function(t){var o=t(window);t.fn.visible=function(i,e,r,f){if(!(this.length<1)){r=r||"both";var n=this.length>1?this.eq(0):this,l=void 0!==f&&null!==f,h=l?t(f):o,g=l?h.position():0,u=n.get(0),p=h.outerWidth(),s=h.outerHeight(),b=!0!==e||u.offsetWidth*u.offsetHeight;if("function"==typeof u.getBoundingClientRect){var a=u.getBoundingClientRect(),c=l?a.top-g.top>=0&&a.top=0&&a.top0&&a.bottom<=s+g.top:a.bottom>0&&a.bottom<=s,d=l?a.left-g.left>=0&&a.left
=0&&a.left
0&&a.right
0&&a.right<=p,w=i?c||v:c&&v,y=i?d||m:d&&m;w=a.top<0&&a.bottom>s||w,y=a.left<0&&a.right>p||y;if("both"===r)return b&&w&&y;if("vertical"===r)return b&&w;if("horizontal"===r)return b&&y}else{var z=l?0:g,B=z+s,C=h.scrollLeft(),H=C+p,R=n.position(),W=R.top,j=W+n.height(),q=R.left,L=q+n.width(),Q=!0===i?j:W,k=!0===i?W:j,x=!0===i?L:q,A=!0===i?q:L;if("both"===r)return!!b&&k<=B&&Q>=z&&A<=H&&x>=C;if("vertical"===r)return!!b&&k<=B&&Q>=z;if("horizontal"===r)return!!b&&A<=H&&x>=C}}}}(jQuery);
var win=$(window),allMods=$(".module");allMods.each(function(l,i){$(i).visible(!0)&&$(i).addClass("already-visible")}),win.scroll(function(l){allMods.each(function(l,i){(i=$(i)).visible(!0)?i.addClass("come-in"):i.removeClass("come-in already-visible")})});
</script>
Lưu ý mã được đánh dấu, có nghĩa là mô-đun lớp là phần mà bạn muốn tạo hiệu ứng. Ví dụ: nếu bạn muốn sử dụng nó trong phần đăng bài, chỉ cần thêm mô-đun lớp vào đánh dấu bài đăng:
<div class='main-wrapper'>
<div id='post' class='post module'></div>
</div>
Đó là tất cả cho Làm thế nào để tạo hiệu ứng chuyển tiếp trên bài đăng hình ảnh . Hy vọng bạn có thể trả lời các yêu cầu của bạn bè blogger
