Memberikan Efek Transisi Pada Gambar Postingan - Arlina Design
Sesuai permintaan, kali ini Arlina Design akan berbagi tips cara Memberikan Efek Transisi Pada Gambar Postingan. Cara kerjanya hampir sama seperti pada postingan Mempercepat Loading Blog dengan Lazy Load AdSense, yaitu konten akan muncul saat kita menggulirkan halaman ke bawah.

Memberikan Efek Pada Gambar Postingan

Bagi sobat yang ingin memasangnya, caranya cukup mudah. Silakan ikuti Tips Blogger pertama dari Arlina Design di awal tahun 2019 ini.

Memberikan Efek Pada Gambar Postingan


Seperti biasa, buka halaman Blogger > Klik menu Tema dan klik tombol Edit HTML > Tambahkan kode CSS ini sebelum </head>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<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>

Bagi yang ingin menggunakan efek transisi lain, sobat bisa buka link ini Daftar Efek CSS Transform atau CSS Animation

Selanjutnya tambahkan kode berikut sebelum </body>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<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("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>

Setelah itu klik tombol Simpan tema dan selesai.


Tidak hanya sebatas untuk memberikan efek pada gambar postingan, sobat juga bisa memodifikasi dan memberikan efek pada bagian lain pada sebuah template. Tinggal dikreasikan kembali sesuai kebutuhan, contohnya seperti ini.


Dan versi ini sedikit berbeda, efek transisi akan tetap berjalan saat menggulirkan halaman ke atas dan ke bawah.

Tambahkan kode CSS ini sebelum </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>

Selanjutnya tambahkan kode berikut sebelum </body>

<script type='text/javascript'>
//<![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=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.left0&&a.right0&&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>

Perhatikan kode yang ditandai, berarti class module adalah bagian yang ingin diberi efek.

Contohnya jika ingin menggunakannya pada bagian postingan, cukup tambahkan class module ke dalam markup postingan :

<div class='main-wrapper'>
  <div id='post' class='post module'></div>
</div>


Sekian untuk Cara Memberikan Efek Transisi Pada Gambar Postingan. Semoga bisa menjawab permintaan sobat blogger dan wassalam.

Memberikan Efek Transisi Pada Gambar Postingan

Sesuai permintaan, kali ini Arlina Design akan berbagi tips cara Memberikan Efek Transisi Pada Gambar Postingan. Cara kerjanya hampir sama seperti pada postingan Mempercepat Loading Blog dengan Lazy Load AdSense, yaitu konten akan muncul saat kita menggulirkan halaman ke bawah.

Memberikan Efek Pada Gambar Postingan

Bagi sobat yang ingin memasangnya, caranya cukup mudah. Silakan ikuti Tips Blogger pertama dari Arlina Design di awal tahun 2019 ini.

Memberikan Efek Pada Gambar Postingan


Seperti biasa, buka halaman Blogger > Klik menu Tema dan klik tombol Edit HTML > Tambahkan kode CSS ini sebelum </head>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<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>

Bagi yang ingin menggunakan efek transisi lain, sobat bisa buka link ini Daftar Efek CSS Transform atau CSS Animation

Selanjutnya tambahkan kode berikut sebelum </body>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<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("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>

Setelah itu klik tombol Simpan tema dan selesai.


Tidak hanya sebatas untuk memberikan efek pada gambar postingan, sobat juga bisa memodifikasi dan memberikan efek pada bagian lain pada sebuah template. Tinggal dikreasikan kembali sesuai kebutuhan, contohnya seperti ini.


Dan versi ini sedikit berbeda, efek transisi akan tetap berjalan saat menggulirkan halaman ke atas dan ke bawah.

Tambahkan kode CSS ini sebelum </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>

Selanjutnya tambahkan kode berikut sebelum </body>

<script type='text/javascript'>
//<![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=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.left0&&a.right0&&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>

Perhatikan kode yang ditandai, berarti class module adalah bagian yang ingin diberi efek.

Contohnya jika ingin menggunakannya pada bagian postingan, cukup tambahkan class module ke dalam markup postingan :

<div class='main-wrapper'>
  <div id='post' class='post module'></div>
</div>


Sekian untuk Cara Memberikan Efek Transisi Pada Gambar Postingan. Semoga bisa menjawab permintaan sobat blogger dan wassalam.

Related Post

Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Subscribe Our Newsletter

Notifications

Disqus Logo