Animasi Gambar Berjalan Ala SB-77

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

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