Membuat efek animasi transisi saat scroll di blog

Hello sobat icloudZer kali ini admin bakalan memberikan informasi mengenai bagaimana caranya membuat efek transisi di blogger saat di scroll, atau membuat tampilan muncul saat di scroll di blogger

Info: Oke jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama

Efek Transisi

Banyak sekali cara untuk membuat blog ataupun website semakin menarik, salah satunya dengan membuat tampilan efek transisi di blogger, tau kan apa itu efek transisi? jika di video YouTube efek transisi biasanya di gunakan pada saat perpindahan antara suatu video dengan video lainnya, pastinya akan ada jeda animasi yang di tampilkan pada saat pergantian video tersebut, pastinya dengan tampilan efek transisi yang berbagai macam tampilan sesuai jenis tools yang digunakan pada saat mengedit video tersebut

Transisi pada web

Sedangkan efek transisi juga bisa di terapkan pada tampilan website dengan metode dan cara yang sedikit berbeda dari efek transisi di blogger, sedangan tampilan dari efek animasi tersebut adalah muncul saat tampilan blog di scroll

Menggunakan Javascript

Untuk membuat tampilan dari efek animasi di blogger tersebut di buat menggunakan kode javascript dengan mengkolaborasikan kode CSS agar tampilan efek transisi di blogger bisa berfungsi secara benar dan tepat

Contoh Tampilan

Jika penasaran dengan efek transisi di blogger kamu bisa menggunakan tombol di bawah ini untuk langsung memeriksanya

• Periksa

Info: Bagaimana sobat dengan contoh tampilan nya keren sekali yak

Cara pembuatan

Baiklah sekarang saatnya admin bakalan menjelaskan mengenai bagaimana caranya membuat efek transisi di blogger, perhatian setiap penjabaran yang admin berikan di bawah ini

Kode CSS

Salin kode CSS di bawah ini kemudian letakkan di atas kode ]]></b:skin>, dan ubah class kode di bawah ini sesuai class kode oada template kalian

/* Transisi By Icloudice.com */
.imgani .widget-title, .imgani .widget .title, .imgani .sidebar .title,.imgani .related-posts .title, .imgani .comments .title,.imgani  .Blog .post .post-entry h1, .imgani .Blog .post .post-entry h2,.imgani .Blog .post .post-entry h3,.imgani .Blog .post .post-entry h4,.imgani  .Blog .post .post-entry h5, .imgani .Blog .post .post-entry h6,.imgani .Blog .post .post-entry img,.imgani .Blog .post .post-entry pre
{opacity:0;transition:all .3s ease;transform:scale(.96) translateY(20px)}
.imgani .widget-title.rahtransisi, .imgani .widget .title.rahtransisi, .imgani .sidebar .title.rahtransisi,.imgani .related-posts .title.rahtransisi, .imgani .comments .title.rahtransisi,.imgani .Blog .post .post-entry h1.rahtransisi, .imgani .Blog .post .post-entry h2.rahtransisi,.imgani .Blog .post .post-entry h3.rahtransisi,.imgani .Blog .post .post-entry h4.rahtransisi,.imgani h5.rahtransisi, .imgani .Blog .post .post-entry h6.rahtransisi,.imgani .Blog .post .post-entry img.rahtransisi,.imgani .Blog .post .post-entry pre.rahtransisi
{opacity:1;transform:scale(1) translateY(0)} 

Info: Atau kamu juga bisa menggantikan tag kode <style> untui meletakkan kode CSS di atas

Kode Javascript

Langkah selanjutnya yang bisa kamu lakukan untuk membuat efek transisi di blogger salin kode javascript di bawah ini, kemudian letakkan di atas kode </head>

<script type='text/javascript'>
//<![CDATA[
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();$(".widget-title, .widget .title, .sidebar .title,.related-posts .title, .comments .title, .Blog .post .post-entry h1, .Blog .post .post-entry h2, .Blog .post .post-entry h3, .Blog .post .post-entry h4, .Blog .post .post-entry h5, .Blog .post .post-entry h6, .Blog .post .post-entry pre").each(function(){var s=.1*$(this).height()-o+$(this).offset().top;$(document).scrollTop()>s&&$(this).addClass("rahtransisi")})}));
//]]></script>

Info: Masih sama kamu harus menyesuaikan setiap class yang dimulai dengan simbol titik(.) hingga ke simbol koma(,) untuk memfungsikan transisi pada tampilan web yang kamu inginkan

Penjelasan

Pastinya kamu akan kebingungan sekali dengan penjabaran di atas, dan admin akan menjelaskan sedikit mengenai penerapan setiap kode di atas, disini untuk menampilkan efek transisi di blogger sangat di perlukan pengetahuan kode CSS yang di mana kode CSS terdiri dari class, tah dan juga id, jadi jika kamu langsung menyimpan kode yang admin jabarkan di atas pada template kamu, al hasil efek transisi tidak akan langsung berfungsi karena class, tag ,danjuga id CSS pada setiap template tersebut berbeda beda

Nah tugas kamu adalah memilih class, tag, dan id dari kode CSS tersebut, untuk di muat dalam kode tersebut, secara simple nya begini jika kamu ingin membuat efek transisi pada gambar, maka gunakan tag kode img didalam kode Javascript dan CSS yang admin jabarkan di atas

Contoh Kode

Masih bingung 🤔 juga, baiklah lihat contoh kode di bawah ini untuk menyesuaikan kode CSS dan kode javascript nya

.imgani .class_code1, .imgani .class_code2,qimgani .class_code2,.imgani img /* tag transisi khusus gambar*/,.imgani dan seterusnya

Info: Namun kamu harus menggunakan setiap class secara detail, tampilan apa di dalam website yang ingin kamu berikan efek transisi tersebut, masih bingung juga silahkan hubungi admin untuk bertanya