Membuat background animasi dengan jquery

Membuat background animasi dengan gambar .gif pasti udah biasa tapi kalau dengan jquery pasti lebih luar biasa mantapnya karena ada kesan tersendirinya kalau bagi saya. disini anda cuman butuh gambar tanpa background atau backgroundnya transparan biasa gambar itu berekstensi .png biar terlihat lebih keren coba lihat demonya.

DEMO

Setelah anda cek demonya gimana perasaan anda..? apa anda ingin membuat background animasi seperti itu..? pasti unik banget ya kalau backgroundnya animasi seperti itu di kira orang pasti gambarnya yang animasi padahal animasinya menggunakan kode mari langsung kita praktek.

1. Baca: Cara menyimpan kode html di blog
2. Masukan kode di bawah ini di dalam Gadget HTML/Javascript

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
    var scrollSpeed = 70;       // Kecepatan gerak dalam milliseconds
    var step = 1;               // perpindahan gerak awan
    var current = 0;
    var imageHeight = 4300;
    var headerHeight = 300;
    //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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFXXcN5DBX3FLfUVgYCJ3xxBYEoqA1EQPj91uKe-T9cV4RvXBSRC-bXDB_lUXVfMnyH1R2jkIPIKqzn3KN5vLfZZ1O_FayQ1H0aqkAVMfpFFSeWrb_1ho9ElOk2vw7vSDGvhSmCu1kF-E/s1600/awan2.png) repeat scroll left top;
padding:10px 10px;
font: normal 15px/15px Arial,sans-serif;
}
</style>

<div id='zinto'>
Disini isi teks anda atau gambar dan lain - lain
</div>

3. Klik SIMPAN

Sekarang Coba perhatikan tanda Minus - itu mengartikan arah pergerakan background kalau Minus - berarti ke atas, kalau Plus + berarti ke bawah silahkan ganti dengan tanda Plus + jika anda ingin pergerakan animasinya ke bawah, perhatikan juga kode bergaris bawah jika kode tersebut sudah ada di blog anda jangan anda masukan lagi jadi cukup kode yang berada di bawahnya saja yang anda masukan.