Cara Membuat Efek Transisi Pada Gambar Di Postingan Blog

Cara Membuat Dan Memasang Efek Transisi Yang Keren Pada Gambar Di Postingan Blog - Sebenarnya efek transisi pada gambar ini merupakan efek yang banyak digunakan dan diterapkan di berbagai blog atau website. Tapi tidak ada salahnya kalau saya membahas lagi tentang efek transisi pada gambar yang ada di postingan blog. Efek transisi pada gambar ini akan muncul atau berfungsi saat kita menggulirkan halaman ke bawah.

Efek transisi ini sangat unik dan keren banget dan wajib dicoba bagi kamu yang lebih mementingkan desain pada sebuah blog. Cara pemasangan efek ini juga sangatlah mudah dan tidak ribet. Cukup menambahkan beberapa baris kode ke dalam markup HTML diblog kamu. Kalau kamu masih asing banget sama efek transisi pada gambar diblog ini, kamu bisa lihat demo atau ilustrasinya di artikel saya yang lumayan banyak gambarnya.

Baca Juga Cara Mengembalikan Akun Instagram Yang Dibajak Dengan Mudah Dan Cepat Dijamin Langsung Balik Lagi

Cara Memasang Atau Membuat Efek Transisi Pada Gambar Di Postingan Blog

1. Masuk ke dashboard blogger kamu.
2` Masuk ke menu Theme > Edit HTML.
3. Lalu cari tag </head> dan pastekan kode dibawah ini tepat berada diatas tag tersebut.

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

4. Kemudian pastekan kembali kode dibawah ini tepat berada diatas </body>

<script>
//<![CDATA[
// Image Transition
var scroll="yes",Fscroll=scroll.replace(/(rn|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>

5. Jika semuanya sudah dipasang silakan simpan perubahannya dan lihat hasilnya.

View On Codepen   

Itulah tutorial cara memasang efek transisi pada gambar dipostingan blog pada artikel kali ini. Kalau masih mengalami gagal atau kesulitan saat menerapkan kodenya, silakan tanyakan dikolom komentar.

Share :