Animasi Background Firefly

Animasi Background Star Firefly merupakan animasi javascript yang menampilkan efek bintang yang bergerak seperti kunang-kunang. Pemasangan aplikasi sedikit rumit tapi jangan khawatir saya akan buat langkahnya semudah mungkin untuk menghindari kesalahan pemasangan. Animasi ini cocok digunakan untuk blog pribadi yang punya tema diary blog atau info gadget dan game.

Penting !!! ada baiknya sobat blogger mem-backup terlebih dahulu template blog sobat untuk menghindari  hal-hal yang tidak diinginkan dalam menerapkan widget ini.

Cara Pemasangan :

• Login ke blog sobat...


• Klik "More Options" selector box kemudian klik "Tata Letak" setelah itu pilih "Add Widget" dan pilih "HTML / Javascript", seperti gambar di bawah ini.
  
  
  

  
  

  

  
  

  

  
  

  


• Copy-paste kode di bawah ini dan taruh di kotak gadget blog. Silakan sesuaikan beberapa parameter kode tersebut agar sesuai dengan tema blog sobat.

  <script>
  $(document).ready(function() { $.firefly({images : ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZLO8GzbWHw9a9NCCGWa1c7WaLeigMG0mQiGBXHiDb7XMjYh1vz8Ahp7jVwHN1jC3wLn4NHI0fDMP9iUjUjDg3wV4t2QF2TIBxQNvTy5Oib35CnmfVQu2QxFk65zmELxVJd6OHZeyanX4f/s800/firefly%2520small.png'],total : 10});}); 
  /*Http://monozcore.blogspot.com*/
  (function($) { 
  var defaults = {
  images : ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRbY_2xGnOIfBBEDOCMXdZCXw3THMD7Qkerm9DrbEYJWRIB7-bvjvhqG_rXKIFeuz1uRNjHYn-_GsHhAd2m0aPebg1FVG11JSS3nbRAepjS_yLDwLZhiPom60Q9WfG2zcxJJrJSIXJtgwp/s800/monoz.png', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRbY_2xGnOIfBBEDOCMXdZCXw3THMD7Qkerm9DrbEYJWRIB7-bvjvhqG_rXKIFeuz1uRNjHYn-_GsHhAd2m0aPebg1FVG11JSS3nbRAepjS_yLDwLZhiPom60Q9WfG2zcxJJrJSIXJtgwp/s800/monoz.png',
  'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRbY_2xGnOIfBBEDOCMXdZCXw3THMD7Qkerm9DrbEYJWRIB7-bvjvhqG_rXKIFeuz1uRNjHYn-_GsHhAd2m0aPebg1FVG11JSS3nbRAepjS_yLDwLZhiPom60Q9WfG2zcxJJrJSIXJtgwp/s800/monoz.png', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRbY_2xGnOIfBBEDOCMXdZCXw3THMD7Qkerm9DrbEYJWRIB7-bvjvhqG_rXKIFeuz1uRNjHYn-_GsHhAd2m0aPebg1FVG11JSS3nbRAepjS_yLDwLZhiPom60Q9WfG2zcxJJrJSIXJtgwp/s800/monoz.png'],
  total : 10
  };
  $.firefly = function(settings) {
  $.firefly.settings = $.extend({}, defaults, settings);
  if($.firefly.preloadImages()){
  for (i = 0; i < $.firefly.settings.total; i++){
  $.firefly.fly($.firefly.create($.firefly.settings.images[$.firefly.random(($.firefly.settings.images).length)]));
  }
  }
  return;
  };
  $.firefly.create = function(img){
  spark = $('<img>').attr({'src' : img}).hide();
  $(document.body).append(spark);
  return spark.css({
  'position':'absolute',
  'z-index': $.firefly.random(1000),
  top: $.firefly.random(($(window).height()-50)),
  left:  $.firefly.random(($(window).width()-50))
  }).show();		
  }
  $.firefly.fly = function(sp) {
  $(sp).animate({
  top: $.firefly.random(($(window).height()-50)),
  left: $.firefly.random(($(window).width()-50))
  }, (($.firefly.random(10) + 5) * 2000),function(){  $.firefly.fly(sp) } );
  };
  
  $.firefly.preloadImages = function() {
  var preloads = new Object();
  for (i = 0; i < ($.firefly.settings.images).length; i++){  
  preloads[i] = new Image(); preloads[i].src =  $.firefly.settings.images[i];
  }
  return true;
  }
  $.firefly.random = function(max) {
  return Math.ceil(Math.random() * max) - 1;
  }
  })(jQuery);
  </script>
  

  
  KETERANGAN :
  • Kode berwarna biru merupakan URL link gambar firefly, untuk gambar lain silakan gunakan link url gambar yang sobat inginkan.
  • Kode berwarna hijau merupakan banyaknya gambar firefly yang ditampilkan.


• Klik "Save" dan lihat hasilnya...

Oke sobat monozcore jangan lupa meninggalkan jejak komentarnya yaa... biar postingan berikutnya semakin unik dan menarik.. happy blogging...

.: Semoga Bermanfaat :.