Cara Membuat Efek Transisi Pada Gambar Postingan

Cara Membuat Efek Transisi Pada Gambar Postingan
06 March 2019
Cara Membuat Efek Transisi Pada Gambar Postingan

gunturr.com - Efek transisi pada gambar postingan blog mungkin hanya beberapa orang yang mengetahui dan menggunakannya, nah di artikel ini saya akan membagikan tutorial tersebut.

Contoh efeknya transisi pada gambar seperti di blog saya ini, Penasaran dengan bagaimana cara menerapkannya di blog anda? tanpa basa-basi simak saja langsung tutorialnya berijut ini.

Cara Membuat Efek Transisi Pada Gambar Postingan


Seperti biasa anda harus login terlebih dahulu ke blogger.com sesuai akun blog anda masing-masing, dan masuk ke menu Tema > Edit HTML lalu tambahkan kode CSS berikut ini di atas kode </head> template blog anda.

<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>

Langkah selanjutnya tambahkan kode berikut  ini di atas kode </body> template blog anda.

<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>

Jika sudah diterapkan kode diatas tinggal klik Simpan / Save template anda Selesai.
Itulah Cara Membuat Efek Transisi Pada Gambar. Postingan bagaimana mudah bukan? hal positif jika menerapkan efek ini di blog terasa sangat elegan dan keren pastinya semoga bermanfaat see you next time.

Share this post :

Related Posts

Click to Comments

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

loading...

Iklan Bawah Artikel