jQuery Efek fadeIn dan fadeOut Page Load Blog

jQuery Efek fadeIn dan fadeOut Page Load Blog – Halo sobat blog, pada kesempatan kali saya kembali ingin berbagi sebuah tutorial sederhana untuk sobat semua, dimana tutorial kali ini berhubungan dengan page loading blog kita.

jQuery Efek fadeIn dan fadeOut Page Load Blog ini bermanfaat untuk merapihkan tampilan blog, dimana biasanya page load blog memakan waktu yang lama karna banyaknya javascript menyebabkan loading membuka halaman tampilannya sedikit terganggu dan agak terlihat kurang rapi.

Untuk mengatasi hal ini maka anda bisa memanfaatkan jQuery Efek fadeIn dan fadeOut Page Load Blog untuk menutupi kekurangan tersebut agar pada saat halaman blog terbuka sudah dalam tampilan seutuhnya sesuai tata letak masing-masing elemen.

Namun perlu diketahui, jQuery Efek fadeIn dan fadeOut Page Load Blog ini bukan berarti mempercepat loading blog akan tetapi hanya memanipulasi halaman pada saat proses loading sehingga saat browser memuat (membaca javascript yang tergolong lama) dan terkadang menyebabkan tampilan halaman sedikit acak-acakan.

Mungkin apabila diantara kalian ada yang mengalami masalah seperti ini, jQuery Efek fadeIn dan fadeOut Page Load Blog bisa menjadi alternatife untuk memanipulasi halaman dengan membuat efek fadeIn dan fadeOut.

Agar setiap kali pengunjung masuk dan menjelajahi blog dengan link yang ada, maka setiap kali browser memuat halaman akan menampilkan efek halaman yang memudar terlebih dahulu dan saat halaman terbuka sudah dalam tampilan yang rapi pastinya.

Efek fadeIn Page Load Blog
Berikut ini adalah salah satu efek fadeIn page load blog yang cukup sederhana, walau begitu efek ini cukup ampuh untuk memanipulasi loading halaman blog. Untuk menerapkan Efek fadeIn Page Load Blog masuk ke Edit HTML lalu taruh di atas kode </body>

<script type='text/javascript'>
$(document).ready(function () {
 $('body').hide().fadeIn(5000).delay(500)
});
</script>

Script diatas sudah bisa berjalan. Namun biasanya setelah layout blog sudah nampak terlihat akan tetapi efek baru akan mulai berjalan. Untuk menghilangkan terlebih dahulu, bisa menggunakan CSS body{display:none} untuk menyembunyikan body sebelum script berjalan.

Efek fadeIn dan fadeOut Page Load Blog
Untuk yang ini dengan sedikit tambahan efek pada saat keluar dari halaman (meninggalkan halaman).
Pada saat berpindah halaman maka akan timbul efek fadeOut atau halaman akan memudar terlebih dahulu sebelum ke link halaman berikutnya.

Cara kerja dari script di bawah adalah menyeleksi seluruh link yang ada pada halaman blog tersebut, sehingga mungkin apabila pada blog tersebut terdapat salah satu link untuk menampilkan lightbox atau modal dialog mungkin akan bentrok dan salah satu dari efek tersebut
tidak berjalan.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
 $("body").css("z-index", "-10");
 $("body").fadeIn(5000);
 $("a").click(function (event) {
  event.preventDefault();
  linkLocation = this.href;
  $("body").fadeOut(1000, redirectPage);
 });

 function redirectPage() {
  window.location = linkLocation;
 }
});
//]]>
</script>

Namun sebelum menerapkan cara di atas, juga perlu dipastikan bahwa di template blog juga sudah terpasang jQuery, bisa menggunakan versi terbaru atau bisa juga versi dibawahnya.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>

Apabila sebelumnya sudah terdapat kode tersebut maka abaikan saja kode diatas karena tidak perlu memasangnya lagi.

Selamat mencoba..