Membuat Efek Sliding Background Menggunakan CSS

Cara membuat efek sliding background ini bukanlah hal baru. Saya sudah melihat beberapa situs web menggunakan efek ini, biasanya background yang digunakan adalah macam-macam foto dokumentasi dan sebagainya. Disini saya akan membahas bagaimana cara membuat efek sliding background.

Berikut previewnya: Demo.

perlu di perhatikan bahwa ini berbeda dengan CSS slideshow atau Carousel, dimana gambar tersebut bisa dipisahkan menjadi slide yang dapat berhenti.

Cara ini mengambil background dari satu elemen yang akan menjadi efek background yang akan selalu bergerak.

HTML

<div class="wrapper">
    <div class="sliding-background"></div>
</div>

 Posisi Element

Mari kita tambah CSS untuk menetapkan posisi yang benar untuk 2 elemen ini.

.wrapper {
  overflow: hidden;
}

.sliding-background {
  height: 500px;
  width: 5076px;
}

.wrapper disini adalah 100% dari width default suatu browser, dan kita tambakan overflow properti yang akan menyembunyikan apapun secara visual yang berada di luar itu, anggap saja seperti tanaman dalam sebuah foto, mungkin ada beberapa hal extra di luar bungkus(wrapper), tapi si pembungkus itu yang mencegah kita dari melihatnya.

untuk .sliding-background disinilah triknya, saya memberi lebar 5076px agar membuat sliding efek ini bekerja.

 Membuat/memilih background image

Disini kalian bebas memilih gambarnya. seperti di langkah sebelumnya saya agak sewenang-wenang membuat lebarnya 5076px hehe, itu sengaja dalam arti jika dibagi 3 akan cocok untuk waktu slide per menit. dengan kata lain gambar ini akan mengulang 3 kali dalam 1 menit.

tambahkan background url pada CSS nya.

.sliding-background {
  background: url("tempatimage") repeat-x;
  height: 500px;
  width: 5076px;
}

nah, dengan begitu si gambar akan selalu bergerak mengulang di layar.

Efek sliding

Disini gambar akan bergerak dari kiri ke kanan, kalian juga dapat menggantinya dari kiri ke kanan, dengan mengubah properti transform  pada 0%, dengan kata lain tinggal menukar posisinya saja.

@keyframes .slide  { 
  0% { 
    transform :  translate3d (0, 0, 0) ; 
  } 
  100% { 
    transform :  translate3d (-1692px, 0, 0) ; 
  } 
}

Sekarang mari kita tambahkan waktu animasi slide pada .sliding-background dan jalankan untuk 1 menit dengan pengulangan tak terbatas.

.sliding-background {
  background: url("..path/to/image") repeat-x;
  height: 560px;
  width: 5076px;
  animation: slide 60s linear infinite;
}

Dengan begitu efek sliding background ini sudah dapat dicoba. untuk mencobanya bisa disini : Demo.

Sekian Tutorial cara membuat efek sliding background menggunakan CSS, semoga bisa membantu.

Comments

comments