As for requests, this time Droidnur will share tips on "how to give transition effects to post images". The way it works is almost the same as in the post Speeding up Blog Loading with Lazy Load AdSense, namely content will appear when we scroll the page down.
For friends who want to install it, the method is quite easy. Please follow the first Blogger Tips from Droinur in early 2021.
Step: Giving Effects to Post Images
As usual, go to Blogger page > then Click Theme menu and click Edit HTML button next to customize > Add this CSS code before </head> tag
<b:if cond='data:blog.pageType != "index"'>
<style>
.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>For those who want to use other transition effects, my friend can open this link List o Best CSS Transform or Best CSS Animation Effects
Next, add the following code before </body> tag
<b:if cond='data:blog.pageType != "index"'>
<script>
//<![CDATA[
// Image Transition
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>After that don't forget to click, the Save theme button, and you are done.
Demo
Not only limited to giving effects to the post image, but you can also modify and give effects to other parts of a template. Just re-created as you needed, for example like this.
Demo
And this version is marginally different, the transition effect will still run when scrolling the page up and down.
Add this CSS code before</head>tag
<style>
.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>Next, add the following code before </body> tag
<script>
//<![CDATA[
// Transition
!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<s+g.top:a.top>=0&&a.top<s,v=l?a.bottom-g.top>0&&a.bottom<=s+g.top:a.bottom>0&&a.bottom<=s,d=l?a.left-g.left>=0&&a.left<p+g.left:a.left>=0&&a.left<p,m=l?a.right-g.left>0&&a.right<p+g.left: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);
// Transition Option
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>Please Pay attention to the marked code, it means the class module is the part that you want to give effect.
For example, if you want to use it in the post section, just add the class module to the particular post markup:
<div class='main-wrapper'>
<div id='post' class='post module'></div>
</div>Demo
CONCLUSION:
Thanks for reading this " How To Giving Transition Effects to Post Images "post for so long. If you have an opinion, don't forget to let us know in the comments. And if the post seems helpful, don't forget to heal your friends. Thanks.