. Scrolling Background Effek Jquery | Catatan Si Virgo Girl

 Subscribe in a reader

Berlangganan gratis Via Email Di bawah ini

Saturday, September 24, 2011

Scrolling Background Effek Jquery


Pada kesempatan hari ini saya akan membagikan ilmu tentang jquery, kali ini saya akan membahas mengenai Background blog yang beda dari yang lain, yakni Background yang bias bergerak atau berjalan seperti Background blog saya ini…!!! Gimana pendapat sobat…?

Biar gak banyak ngomong yuk kita langsung aja ke langkah pembuatannya…

1. Seperti biasa kita login terlebih dahulu
2. Setelah login masuk ke Rancangan => Edit HTML
3. Lanjut ke langkah selajutnya, cari kode </head> lalu masukan kode di bawah ini tepat di atasnya.
    (catatan : kalau sudah mempunyai kode ini sobat tidak perlu memasukannya lagi)

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'></script>


    4. Kemudian masukan lagi kode di bawah ini tepat di bawah kode yang di atas.

       <script type='text/javascript'>
      //<![CDATA[
      $(function(){

      // ***
      // Scrolling background
      // ***

      // height of background image in pixels
      var backgroundheight = 4000;

      // get the current minute/hour of the day
      var now = new Date();
      var hour = now.getHours();
      var minute = now.getMinutes();

      // work out how far through the day we are as a percentage - e.g. 6pm = 75%
      var hourpercent = hour / 24 * 100;
      var minutepercent = minute / 30 / 24 * 100;
      var percentofday = Math.round(hourpercent + minutepercent);

      // calculate which pixel row to start graphic from based on how far through the day we are
      var offset = backgroundheight / 100 * percentofday;

      // graphic starts at approx 6am, so adjust offset by 1/4
      var offset = offset - (backgroundheight / 1);

      function scrollbackground() {
      // decrease the offset by 1, or if its less than 1 increase it by the background height minus 1
      offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
      // apply the background position
      $('body').css("background-position", "50% " + offset + "px");
      // call self to continue animation
      setTimeout(function() {
      scrollbackground();
      }, 70
      );
      }

      // Start the animation
      scrollbackground();
      });
      //]]>
      </script>


      5. Setelah itu cari kode body (biasanya letaknya paling atas) lalu masukan property di bawah ini ke   dalamnya.

        background:url(http://lh6.ggpht.com/_dfnTVAxeWMI/SrFV2ZgHUvI/AAAAAAAACU8/yP_7acjnv5U/bgscroll.jpg);
        (Catatan : kode yang berwarna biru sobat dapat menggantinya dengan locasi gambar yang sobat punya atau kalau tidak punya y tidak usah di ganti)

        Tidak mengerti cara memasukannya? saya kasih contoh y lihat kode di bawah ini


        body {
        margin:0;
        color:$textcolor;
        font:x-small Georgia Serif;
        font-size/* */:/**/small;
        font-size: /**/small;
        text-align: center;
        }


        Setelah dimasukan maka akan menjadi

        body {
        background:url(http://lh6.ggpht.com/_dfnTVAxeWMI/SrFV2ZgHUvI/AAAAAAAACU8/yP_7acjnv5U/bgscroll.jpg);
        margin:0;
        color:$textcolor;
        font:x-small Georgia Serif;
        font-size/* */:/**/small;
        font-size: /**/small;
        text-align: center;
        } 


        Atau apabila ada property background di dalam body maka sobat dapat menggantinya, contoh :

        body {
        background: #000;
        margin:0;
        color:$textcolor;
        font:x-small Georgia Serif;
        font-size/* */:/**/small;
        font-size: /**/small;
        text-align: center;
        }


        Maka setelah di ganti menjadi

        body {
        background:url(http://lh6.ggpht.com/_dfnTVAxeWMI/SrFV2ZgHUvI/AAAAAAAACU8/yP_7acjnv5U/bgscroll.jpg);
        margin:0;
        color:$textcolor;
        font:x-small Georgia Serif;
        font-size/* */:/**/small;
        font-size: /**/small;
        text-align: center;
        }



         

        6. Terakhir save.
           
          Artikel ni saya ambil dari http://oketrik.blogspot.com/2010/05/membuat-scroll-background.html. dikarenakna saya benggunakan background seperti ini maka saya akan bagi2kan pada sobat smua, mana tau ada yang berminat untuk mencoba background yang saya gunakan ini....

          13 comments:

          info yg bagus neh,,,pasti sangat bermanfaat,,,
          cma ane pake WP Free,,,
          ywdh gpp,,,!
          :)

          Wah manteb..........
          saya coba praktekkan dlu

          THank' all,, moga bermanfaat..

          This comment has been removed by a blog administrator.

          Maaf bayu... tidak boleh menyertakan link.... :)

          Wah.. boleh juga ni, biar blog kita tampil beda ama yg laen.

          ok... silahkan di coba...

          Wow nice artikel...... xixixi

          wah mantab nih triknya sob, bermanfaat nih,
          sya udah pasang di blog nih,,

          hebat tuh , manfaat banget , sesuatu banget :D

          yupz... sama2 sobat... senang bisa berbagi...

          mnen caru nyu mna buk..>???

          pio anu aq nyndag ???

          tlong bna untuk aq buk ...

          (' ',)

           

          My Followers

          Page Like

          Copyright© 2011 Catatan Si Virgo Girl | Template Blogger Designer by : Utta' |