Contoh Background Animasi Dengan Jquery
Mudah dan simpel .. hhe xP
sampai jumpa posting berikut nya pemirsa
Dan Semoga Tutorial ini bermanfaat bagi anda !
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.
- Masuk Ke Blog Anda
- Buat Postingan baru dengan Judul + isi Terserah anda.
- 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
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