Scrolling Background Blogger dengan Native JavaScript

---

Scrolling Background adalah efek yang membuat gambar latar bergerak secara terus-menerus sehingga sebuah elemen HTML terlihat lebih hidup tanpa harus menggunakan video sebagai background.

Artikel ini merupakan pembaruan dari tutorial CodeFlare lama tentang background bergerak. Versi sebelumnya masih menggunakan jQuery dan perulangan setTimeout(). Pada versi terbaru ini engine ditulis ulang menggunakan native JavaScript dan requestAnimationFrame().

Dengan metode baru, script menjadi lebih ringan, lebih mudah dipahami dan tidak membutuhkan library tambahan. Arah gerakan tetap dapat dipilih ke atas, bawah, kiri atau kanan.

Efek seperti ini cocok digunakan pada hero section, kotak informasi, game-style interface, background dekoratif, widget maupun elemen tertentu pada halaman Blogger.

Informasi Singkat

---

Scrolling Background bekerja dengan mengubah nilai background-position secara bertahap pada sebuah elemen.

Versi terbaru pada artikel ini menggunakan native JavaScript. Jadi Anda tidak perlu memasang jQuery hanya untuk menjalankan animasi background.

Untuk hasil terbaik gunakan gambar tile atau pola yang dapat diulang secara horizontal maupun vertikal.

DAFTAR ISI

1. Live Preview Scrolling Background
2. Cara Memasang pada Blogger
3. Pengaturan Script
4. Generator Scrolling Background
5. Contoh Gambar Tile Background
6. Troubleshooting

Live Preview Scrolling Background

Contoh berikut menggunakan gambar awan sebagai background yang bergerak secara vertikal. Pergerakan dilakukan langsung melalui native JavaScript.

SCROLLING BACKGROUND LIVE PREVIEW

Dynamic Background Native JavaScript

ANIMATION ACTIVE requestAnimationFrame

Background pada preview bergerak dengan mengubah posisi gambar sedikit demi sedikit. Elemen HTML yang berada di atasnya tidak ikut berpindah karena yang dianimasikan hanya properti background.

Jika perangkat pengguna mengaktifkan prefers-reduced-motion, animasi otomatis dihentikan agar tetap ramah aksesibilitas.

Cara Memasang pada Blogger

Sebelum mengubah kode template Blogger, sebaiknya lakukan backup template terlebih dahulu.

PERINGATAN

Simpan backup template sebelum melakukan perubahan HTML. Jika terjadi kesalahan saat pemasangan script, template dapat dikembalikan menggunakan file backup tersebut.

01

Buka Blogger

Login ke dashboard Blogger kemudian pilih blog yang akan dipasang efek background.

02

Buka Tema

Pilih menu Tema kemudian buka editor HTML template.

03

Cari Tag Penutup Body

Cari kode </body> menggunakan fitur pencarian editor.

04

Pasang Script

Tempel kode scrolling background tepat sebelum tag </body>.

05

Sesuaikan Selector

Tentukan elemen yang akan diberi background, misalnya body, #hero atau .namaClass.

06

Simpan dan Tes

Simpan template kemudian periksa hasilnya pada desktop dan smartphone.

Gunakan kode final berikut:

<script> //<![CDATA[ (function(){ "use strict"; var cfBgSetting={ target:"body", direction:"up", image:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWB89KVLrkf6zdpOiUumPFrnRkVZlM_zx_WvsM3AF39OTBBvV2UmDUkWhA7knAdWT2J2uGWAktZEJYYf6vsrSCkvLDbTbOm9m1VSFpiwTsQkF2HzQ7uprdpQTmhKolL29_xZceQlEtyZY/s800/bg-clouds.jpg", color:"#000", speed:24, repeat:"repeat" }; var el=document.querySelector(cfBgSetting.target); if(!el)return; el.style.backgroundImage='url("'+cfBgSetting.image+'")'; el.style.backgroundRepeat=cfBgSetting.repeat; el.style.backgroundColor=cfBgSetting.color; if(window.matchMedia("(prefers-reduced-motion:reduce)").matches)return; var x=0, y=0, last=0; function animate(time){ if(!last)last=time; var delta=(time-last)/16.67; last=time; var move=cfBgSetting.speed*.02*delta; if(cfBgSetting.direction==="left")x-=move; if(cfBgSetting.direction==="right")x+=move; if(cfBgSetting.direction==="up")y-=move; if(cfBgSetting.direction==="down")y+=move; el.style.backgroundPosition=x+"px "+y+"px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); })(); //]]> </script>

Catatan

Jika hanya ingin memberikan efek pada sebuah section atau widget tertentu, jangan gunakan target body. Gunakan ID atau class elemen tersebut agar background seluruh halaman tidak ikut berubah.

Pengaturan Script

Semua pengaturan utama ditempatkan pada satu object sehingga lebih mudah dimodifikasi.

var cfBgSetting={ target:"body", direction:"up", image:"URL-GAMBAR", color:"#000", speed:24, repeat:"repeat" };

target Selector elemen yang akan diberi background. target:"body"

direction Arah pergerakan background. direction:"up"

image URL gambar background. image:"URL-GAMBAR"

color Warna fallback jika gambar gagal dimuat. color:"#000"

speed Kecepatan gerakan background. speed:24

repeat Pengulangan gambar background. repeat:"repeat"

Menentukan target elemen

Untuk seluruh halaman:

target:"body"

Untuk elemen dengan ID:

target:"#heroBackground"

Untuk elemen menggunakan class:

target:".heroBackground"

Mengubah arah gerakan

up Bawah → Atas

down Atas → Bawah

left Kanan → Kiri

right Kiri → Kanan

Mengatur kecepatan

Nilai speed lebih besar membuat background bergerak lebih cepat.

speed:12 // lambat speed:24 // normal speed:45 // cepat

Generator Scrolling Background

Generator berikut dapat digunakan untuk membuat kode tanpa harus mengedit object JavaScript secara manual.

SCROLLING BACKGROUND Native JS Generator

READY

Target Element

Background Image URL

Direction Up Down Left Right

Speed

Fallback Color

Background Repeat Repeat Repeat X Repeat Y

LIVE PREVIEW

Contoh Gambar Tile Background

Gambar tile adalah gambar dengan pola yang dapat disusun berulang sehingga batas antar gambar terlihat menyatu.

Untuk scrolling background, gambar seperti ini biasanya lebih efisien dibandingkan menggunakan satu gambar landscape berukuran sangat besar.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYhNPIKYdOUqb0e7i_p1DOZKR4IOQcHOaI_LQlq98hIobOJ8IOrRcgFmD_bcmqM4dL_IEl01h-PB2TCa6ekqoEwKP35li5UmYxVrLSXjOtHJzY2gUQqN2v79ZUzk_Upb3Tl9jgbRRHu2g/s800/bg.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1B6yeBAwV9KLuypUVPPXgkhPQVT3mqHuQzQ54JlE1dqnlOuLXa1V8ewcWw6Nlu30e7qJ-lS67bGhbsRk_XppIF6kxwj_W6nbabmrzk7KTeoBP6-fFhV6ycPZFKiYEWAUzunJ9jjyIKKc/s800/bg_star.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWB89KVLrkf6zdpOiUumPFrnRkVZlM_zx_WvsM3AF39OTBBvV2UmDUkWhA7knAdWT2J2uGWAktZEJYYf6vsrSCkvLDbTbOm9m1VSFpiwTsQkF2HzQ7uprdpQTmhKolL29_xZceQlEtyZY/s800/bg-clouds.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUmXSSlD-WxRum9E-5564KjvW5U5TEINss9Q9YLzEF2cIcEfgp_UW4yo9ctbur-XKHkYI-leetfkax_hNxvpwyi4J9zwnSFKOiphH6DI0yfNUIfcBjqOWEI9U74iVfomk7gfJP5-kLoGc/s800/animated%2520stars.gif

Tips memilih gambar

Gunakan gambar berukuran relatif kecil dan pola yang bisa diulang dengan baik. Untuk background horizontal gunakan gambar yang cocok dengan repeat-x, sedangkan background vertikal dapat menggunakan repeat-y.

Troubleshooting

Background tidak bergerak

Pastikan selector pada target benar dan elemen tersebut memang tersedia di halaman.

Gambar tidak muncul

Periksa URL gambar dan pastikan menggunakan HTTPS serta dapat dibuka langsung melalui browser.

Gerakan terlihat patah

Kurangi nilai kecepatan dan gunakan gambar tile yang lebih kecil. Hindari gambar background berukuran sangat besar jika tidak diperlukan.

Background seluruh blog berubah

Target kemungkinan masih menggunakan body. Ganti dengan selector elemen tertentu seperti #hero atau .widgetBackground.

Animasi tidak jalan pada beberapa perangkat

Periksa apakah perangkat menggunakan pengaturan reduced motion. Script sengaja menghormati preferensi tersebut.

Background terlalu cepat

Turunkan nilai speed. Misalnya dari 45 menjadi 20.

Versi baru Scrolling Background ini tidak lagi membutuhkan jQuery. Selain mengurangi dependency, source code juga lebih mudah dikembangkan untuk beberapa elemen sekaligus.

Untuk penggunaan modern, efek seperti ini sebaiknya diterapkan pada area tertentu daripada seluruh body jika background terlalu ramai. Dengan begitu konten tetap nyaman dibaca dan animasi hanya menjadi elemen dekoratif.

Jika ingin membuat efek yang lebih kompleks, engine ini dapat dikembangkan lagi menjadi background dengan beberapa layer, parallax, kontrol kecepatan berdasarkan scroll atau arah gerakan yang berubah secara otomatis.

CODEFLARE BLOGGER DEVELOPMENT Butuh Efek atau Widget Blogger Custom?

CodeFlare menerima pembuatan widget, animasi, modifikasi template dan script Blogger sesuai konsep yang Anda butuhkan.

Hubungi CodeFlare