Membuat Infinite Scrolling Background Image Di Blog

Membuat Infinite Scrolling Background Image Di Blog

Bola Hero Gawai

Membuat Infinite Scrolling Background Image Di Blog

Membuat Infinite Scrolling Background Image Di Blog
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

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×