Content

Membuat background animasi dengan Jquery

26 Oktober 2011



Contoh Background Animasi Dengan Jquery
Mudah dan simpel .. hhe xP
sampai jumpa posting berikut nya pemirsa
Dan Semoga Tutorial ini bermanfaat bagi anda !

Anda bisakah melihat yang diatas ! pasti bisa kan bro ..
Apa Anda Berkenan Untuk membuat nya. . . . . . ?
Bagi yang ingin membuat nya silahkan simak langkah - langkah nya.

  1. Masuk Ke Blog Anda
  2. Buat Postingan baru dengan Judul + isi Terserah anda.
  3. Penulisan harus dalam mode   EDIT HTML

     4. Masukan Kode di bawah ini di dalam Postingan ( Mode Edit HTML anda )

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script charset='utf-8' type='text/javascript'>
    var scrollSpeed = 70;       // Speed in milliseconds
    var step = 1;               // How many pixels to move per step
    var current = 0;            // The current pixel row
    var imageHeight = 4300;     // Background image height
    var headerHeight = 300;     // How tall the header is.
 
    //The pixel row where to start a new loop
    var restartPosition = -(imageHeight - headerHeight);
 
    function scrollBg(){
     
        //Go to next pixel row.
        current -= step;
     
        //If at the end of the image, then go to the top.
        if (current == restartPosition){
            current = 0;
        }
     
        //Set the CSS of the header.
        $('#zinto').css("background-position","0 "+current+"px");
     
     
    }
 
    //Calls the scrolling function repeatedly
    var init = setInterval("scrollBg()", scrollSpeed);
 
</script>
<style type='text/css'>
#zinto {
background:#69F url(http://i51.tinypic.com/2uorpfn.jpg) repeat scroll left top;
padding:30px 50px;
}
</style>
<div id='zinto'>
Contoh Background Animasi Dengan Jquery
Mudah dan simpel .. hhe xP
sampai jumpa posting berikut nya pemirsa
Dan Semoga Tutorial ini bermanfaat bagi anda !.

</div>

Pembahasan Kode :

Kode Berwarna ungu  Adalah Kode warna Biru silahkan anda ganti sesuai dengan warna favorit anda.
Untuk mendapatkan Kode warna : http://www.colorschemer.com/online.html

Nah Kode Yang Berwarna Oren adalah kode background gambarnya, silahkan anda ganti dengan background gambar favorit anda.

Terakhir Kode yang berwarna merah adalah isi postingan, jadi silahkan anda ganti dengan isi postingan anda, setelah itu silahkan Terbitkan Entri dan Lihat Hasilnya.

Anda juga Bisa Kembangkan Lagi Dengan Kreasi Anda Sendiri. . . .
Semoga Bermanfaat, Wassalam.


0 komentar:

Posting Komentar

Blog Archive