Membuat Infinite Scrolling Background Image Di Blog

Pagi ini aku inspeksi web untuk mencari inspirasi untuk menciptakan postingan tutorial. Akhirnya aku menemukan sebuah element yang menarik dari web trans7 yaitu gambar yang bergerak secara terus-menerus di bawah navigasi menunya, kira-kira menyerupai pada gambar di atas. Ternyata gambar tersebut merupakan sebuah background yang digerakan dengan jquery infinite scrolling background.

Kemudian aku mencari cara untuk menciptakan hal yang sama, namun memakai javascript semoga sedikit lebih ringan. Akhirnya aku menemukan sebuah javascript yang sanggup dipakai untuk menciptakan background yang bergerak menyerupai yang terdapat pada web trans7.

DEMO

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/AVvXsEhE_1F8qEnoGdQIhlYKBDgnsocRGO4sJV0V0QG2f1ZRMsdnAbE7BhbRygK7b6cjAQh-YQNDl9fj6kw2cKKZDhIwRITxaVjxULJa7VLjKP08KVa67OGGHf4uDLowGJ6wNnaQyFwAvXME7k4/s1600/nav-menu-bdg.jpg);
 background-repeat: repeat-x;
 }

Kode Javascript:
Silhkan simpan arahan javascript di bawah ini di atas arahan </body>

 <script>
 function StartMove() {
     var cssBGImage = new Image();
     cssBGImage.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE_1F8qEnoGdQIhlYKBDgnsocRGO4sJV0V0QG2f1ZRMsdnAbE7BhbRygK7b6cjAQh-YQNDl9fj6kw2cKKZDhIwRITxaVjxULJa7VLjKP08KVa67OGGHf4uDLowGJ6wNnaQyFwAvXME7k4/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 arahan yang aku marking di atas, itu yaitu image warna-warni untuk background yang akan ditampilkan bergerak dengan dimensi 450px x 6px. Image pada arahan CSS dan Javascript harus sama.

Kode HTML:
Kemudian untuk menampilkan infinite scrolling background image di blog, silahkan gunakan arahan HTML di bawah ini dan simpan daerah di mana Anda ingin menampilkannya.

 <div id="scroller"></div>

Selesai, gampang bukan? Semoga bermanfaat.

Referensi:
Ide Postingan: http://www.trans7.co.id/
Kode: http://www.dynamicsights.com/cssscrollback.php


Sumber https://www.kompiajaib.com/

Share this post