Rabu, 08 Februari 2012

Cara Membuat Beckground Animasi




Apakah anda tertarik membuat Background Seperti ini ...?
Trik ini saya dapat dari sin1aja.blogspot dan inilah
Contoh Background Animasi Dengan Jquery
Bagaimana Menurut Anda. . . . .??
Kerenkan Kalau di blog anda bisa membuat Background seperti ini .....
Semoga Tutorial ini bermanfaat bagi anda.

Monggo di Copi Scripnya :
<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(https://sites.google.com/site/sin1ajablog/gambar/awan2.png) repeat scroll left top;
padding:30px 50px;
}
</style>
<div id="zinto">
Apakah anda tertarik membuat Background Seperti ini ...?
Trik ini saya dapat dari sin1aja.blogspot dan inilah
Contoh Background Animasi Dengan Jquery
Bagaimana Menurut Anda. . . . .??
Kerenkan Kalau di blog anda bisa membuat Background seperti ini .....
Semoga Tutorial ini bermanfaat bagi anda.</div>

Pembahasan Kode :
  • Kode Berwarna ungu Adalah Kode warna Biru silahkan anda ganti sesuai dengan warna favorit anda. anda bisa lihat kode warna di Blog ini.
  • Nah Kode Yang Berwarna Kuning 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.

Tidak ada komentar: