Ditulis oleh: Ditulis pada: 1/19/2016
Pagi ini saya inspeksi web untuk mencari ide untuk membuat postingan tutorial. Akhirnya saya menemukan sebuah element yang menarik dari web trans7 yaitu gambar yang bergerak secara terus-menerus di bawah navigasi menunya, kira-kira seperti pada gambar di atas. Ternyata gambar tersebut merupakan sebuah background yang digerakan dengan jquery infinite scrolling background.Kemudian saya mencari cara untuk membuat hal yang sama, namun menggunakan javascript agar sedikit lebih ringan. Akhirnya saya menemukan sebuah javascript yang dapat digunakan untuk membuat background yang bergerak seperti yang terdapat pada web trans7.
Apakah Anda tertarik untuk mencoba menggunakannya di blog Anda? Silahkan gunakan kode-kode di bawah ini.
Kode CSS:
#scroller {
padding:0;
margin:0;
width:100%;
height:6px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWOrvv9NUAzGdm8c-vHuyUsOnAfqRszXpLqUeO123WDhwHg7Jr5_n41IABaU1d5m-BiwEkxT7VXDlgnGRQy0nQXq2Ty2OtaYMIEEK7GDWRSyg3ZuhymV7kliFjPUEYOPvUowJstCHX0sw/s1600/nav-menu-bdg.jpg);
background-repeat: repeat-x;
}
Kode Javascript:
Silhkan simpan kode javascript di bawah ini di atas kode
</body>
<script>
function StartMove() {
var cssBGImage = new Image();
cssBGImage.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWOrvv9NUAzGdm8c-vHuyUsOnAfqRszXpLqUeO123WDhwHg7Jr5_n41IABaU1d5m-BiwEkxT7VXDlgnGRQy0nQXq2Ty2OtaYMIEEK7GDWRSyg3ZuhymV7kliFjPUEYOPvUowJstCHX0sw/s1600/nav-menu-bdg.jpg";
window.cssMaxWidth = cssBGImage.width;
window.cssXPos = 0;
setInterval("MoveBackGround()", 50);
}
function MoveBackGround() {
window.cssXPos = window.cssXPos + 1;
if (window.cssXPos >= window.cssMaxWidth) {
window.cssXPos = 0;
}
toMove = document.getElementById("scroller");
toMove.style.backgroundPosition = window.cssXPos + "px 0px";
}
window.onload=function(){
StartMove()
}
</script>
Perhatikan kode yang saya marking di atas, itu adalah image warna-warni untuk background yang akan ditampilkan bergerak dengan dimensi 450px x 6px. Image pada kode CSS dan Javascript harus sama.
Kode HTML:
Kemudian untuk menampilkan infinite scrolling background image di blog, silahkan gunakan kode HTML di bawah ini dan simpan tempat di mana Anda ingin menampilkannya.
<div id="scroller"></div>
Selesai, mudah bukan? Semoga bermanfaat.
Referensi:
Ide Postingan: http://www.trans7.co.id/
Kode: http://www.dynamicsights.com/cssscrollback.php