Animasi Gambar Berjalan Ala SB-77
Cara Membuat Gambar Berjalan Dengan CSS - Pekerjaan untuk membuat gambar berjalan diblog seperti ini hanya membutuhkan syntax CSS media keyframes animasi, tujuannya untuk membuat gambar bergerak ataupun berjalan sesuai perintah yang menjadi target dengan animation-infinite (gerakan tak terbatas). Sebagai contoh saat Anda akan membuat teks berjalan dengan efek marquee, pada beberapa browser peramban efek ini dapat bekerja dengan baik, namun IE (Internet Explorer) tidak dapat membaca efek seperti marquee data, sehingga objek akan tetap diam tidak bergerak sesuai yang Anda perintahkan.

Efek slide selalu menggunakan perintah JavaScript didalamnya, dalam CSS syntax keyframes seperti inilah yang digunakan untuk menggantikan perintah js jika ingin membuat gambar berjalan dengan efek gerak animasi yang harus kita tuliskan seperti ini:


@keyframes left-right {
0% {left:0;transform:translate(-100%, 0)}
100% {left:100%;transform:translate(-100%, 0)}}

@keyframes right-left {
0% {right:0;transform:translate(0, 0)}
100% {right:100%;transform:translate(100%, 0)}}

Perhatikan media diatas, disana saya menggunanakan 1 konsep properti-duration, namun dengan 2 fungsi gerakan : left-right (30s) dan right-left (35s). Gambar diposisi pertama akan berjalan dari kiri kekanan, dan gambar diposisi kedua akan berjalan dari kanan kekiri dan akan berbalik setelah gambar ditampilkan semua seperti ini:




DEMO SHOW




Slider Image




BACA JUGA
Image Slider Effect With CSS Only




Bagaimana.? pekerjaan yang cukup mudah bukan.!!, yang terpenting saat membuat objek gerak seperti ini adalah nilai pada masing-masing target, sehingga gambar yang Anda jadikan target bisa berjalan mengikuti perintah pada nilai-nilai durasi yang sudah Anda tentukan. Namun sebelum itu efek ini akan bekerja sempurna pada All peramban browser jika semua perintah syntax Anda tuliskan disana. (Baca Selengkapnya Memahami Dengan Mudah Bentuk Kinerja CSS Animasi)


Cara Membuat Gambar Berjalan Dengan CSS
Penerapan Element
1.1 CSS Input



<style type="text/css">
.picSB-77 {position:relative}
.picSB-77__list {position:absolute;height:244px;white-space:nowrap}
.picSB-77__list:nth-child(1) {top:0px}
.picSB-77__list:nth-child(2) {top:247px}
.picSB-77__list:nth-child(3) {top:494px}
/* Jika ingin menambahkan lebih banyak gambar lagi,
letakkan kode fungsinya disini dengan nilai selisi top:247px */

.picSB-77__list--img-css1 {
  animation:left-right 30s infinite;
  animation-direction:alternate;
  animation-timing-function:linear}

.picSB-77__list--img-css2 {
  animation:right-left 35s infinite;
  animation-direction:alternate;
  animation-timing-function:linear}

.picSB-77_item {
  display:inline-block;
  overflow:hidden;
  height:244px;
  box-sizing:border-box;
  margin-right:3px;}

@keyframes left-right {
0% {left:0;transform:translate(-100%, 0)}
100% {left:100%;transform:translate(-100%, 0)}}
@keyframes right-left {
0% {right:0;transform:translate(0, 0)}
100% {right:100%;transform:translate(100%, 0)}}
</style>


1.2 HTML Markup


<div class='picSB-77'>
  <ul class='picSB-77__list picSB-77__list--img-css1'>
<li class='picSB-77_item'><img alt='pic1' class='picSB-77_image' src='URL-gambar'></li>
<li class='picSB-77_item'><img alt='pic2' class='picSB-77_image' src='URL-gambar'></li>
<li>...Tambahkan lebih banyak gambar lagi disini...</li>
....
  </ul>

  <ul class='picSB-77__list picSB-77__list--img-css2'>
<li class='picSB-77_item'><img alt='pic1' class='picSB-77_image' src='URL-gambar'></li>
<li class='picSB-77_item'><img alt='pic2' class='picSB-77_image' src='URL-gambar'></li>
<li>...Tambahkan lebih banyak gambar lagi disini...</li>
....
  </ul>
</div>


Semoga pertemuan kita kali ini dalam pembahasan Cara Membuat Gambar Berjalan Dengan CSS dapat memberikan inspirasi buat sahabat semua pecinta SAHABAT BLOGGER 77. Semoga bermanfaat, terimakasih and happy blogging

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Animasi Gambar Berjalan Ala SB-77
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

23 komentar

  1. Bagus ini mbak , Top dah buat mbak devi (h)

    BalasHapus
    Balasan
    1. masa hanya dikasih top, kalau beng-beng boleh gak, atau cokolatos gitu mbak, hehe..!!

      Hapus
    2. kalau dapat kita bagi ya dev....lumayan sambil belajar gambar berjalan dengan css.

      Hapus
  2. gambar berjalan keren sekali, kucing nya di demo lucu-lucu :)

    BalasHapus
    Balasan
    1. kebetulan mas, saya memang suka dengan kucing, soalnya memang imut-imut gitu,

      Hapus
  3. Keren mbak pure css lagi...

    BalasHapus
  4. lbh keren lg klo gmbr yg dipake gambarnya devy ,,,,hehehe (f)

    BalasHapus
    Balasan
    1. takutnya devy jadi pusing mas, kalau gambarnya ditaruh disana, ntar ada yang tanya, kenapa kok devy mondar-mandir mulu, emang cari siapa.? gitu lagi. hehe..!!

      Hapus
    2. klo devy psing nnti sy olesi pke minyak kyu putih gmn ? hehehe :)

      Hapus
    3. nah lo....modal minyak kayu putih ya gan....kalau gitu saya modal balsem deh....

      Hapus
    4. hahahaha ... aduh ,,,, ada mbah dinan nih ,,,, :D

      Hapus
    5. minyak kayu putih sudah, balsem sudah, terus ....yang mau modal koin siapa attuh..?

      Hapus
    6. gk usah pke koin ,,, pke jari2 sy aja lngsung biar lbh tersa ,,,,

      Hapus
    7. takut ah mas, ntar terkena tetanus lagi, hehe..!!

      Hapus
    8. hehehe, tenang aja, jari2 nya steril kok ,,, :)

      Hapus
  5. dilaptop saya pas demo gambarnya ga kebuka mba, koneksinya kurang ajib kayanya. tapi gambar yang ga kebuka berjalan dengan baik..

    BalasHapus
    Balasan
    1. berjalan dengan bagus dan rapi kayak berbaris hen. mana tuh kucing lucu-lucu semua lagi. kirim kucingnya satu dev lewat email.

      Hapus
  6. pas bnget,lagi perlu,terima kasih mbak :)

    BalasHapus
  7. harus di catat dulu nih. biar g salah salah. penting nih

    BalasHapus
    Balasan
    1. apanya yang dicatat mang....orang saya biasanya nyontek dan dikerjakan teman PRnya. heeee

      Hapus
  8. ternyata sederhana penggunaan keyframenya dan itu sudah bisa menimbulkan efek pergerakan yang bagus....
    tinggal kita berimprofisasi untuk memunculkan suatu yang lebih unik ya dev. ok makasih ilmunya ya sista.

    BalasHapus
  9. Wah keren nih buat products thunbnail untuk ecommerce. Tapi mungkin akan saya stop efeknya saat hover supaya pengunjung bisa lihat jelas previewnya. Ok,makasih mbak buat artikelnya! Inspiring!

    BalasHapus
  10. makasih mbak brrrow manfaat banget

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK