Skip to main content
KOMPI AJAIB

follow us

Berbuat khilaf adalah sifat. Meminta maaf adalah kewajiban. Dan kembalinya Fitrah adalah tujuan. Saya, Adhy Suryadi admin blog Kompi Ajaib MEMOHON MAAF LAHIR DAN BATHIN. Minal Aidin Wal Faidzin Taqabalallahu minnaa wa minkum. Selamat hari raya Idul Fitri, 1 Syawal 1439 H.

×

Membuat Infinite Scrolling Background Image Di Blog

Baca juga:

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(http://3.bp.blogspot.com/--jeHBgQ--fE/Vp23hDs1WzI/AAAAAAAAkkw/c4h2cYqtdf0/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 = "http://3.bp.blogspot.com/--jeHBgQ--fE/Vp23hDs1WzI/AAAAAAAAkkw/c4h2cYqtdf0/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

You Might Also Like:


Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar