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:
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
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
1.2 HTML Markup
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
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)}}
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:
BACA JUGA
Image Slider Effect With CSS OnlyBagaimana.? 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
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 >>
Bagus ini mbak , Top dah buat mbak devi (h)
BalasHapusmasa hanya dikasih top, kalau beng-beng boleh gak, atau cokolatos gitu mbak, hehe..!!
Hapuskalau dapat kita bagi ya dev....lumayan sambil belajar gambar berjalan dengan css.
Hapusgambar berjalan keren sekali, kucing nya di demo lucu-lucu :)
BalasHapuskebetulan mas, saya memang suka dengan kucing, soalnya memang imut-imut gitu,
HapusKeren mbak pure css lagi...
BalasHapuslbh keren lg klo gmbr yg dipake gambarnya devy ,,,,hehehe (f)
BalasHapustakutnya devy jadi pusing mas, kalau gambarnya ditaruh disana, ntar ada yang tanya, kenapa kok devy mondar-mandir mulu, emang cari siapa.? gitu lagi. hehe..!!
Hapusklo devy psing nnti sy olesi pke minyak kyu putih gmn ? hehehe :)
Hapusnah lo....modal minyak kayu putih ya gan....kalau gitu saya modal balsem deh....
Hapushahahaha ... aduh ,,,, ada mbah dinan nih ,,,, :D
Hapusminyak kayu putih sudah, balsem sudah, terus ....yang mau modal koin siapa attuh..?
Hapusgk usah pke koin ,,, pke jari2 sy aja lngsung biar lbh tersa ,,,,
Hapustakut ah mas, ntar terkena tetanus lagi, hehe..!!
Hapushehehe, tenang aja, jari2 nya steril kok ,,, :)
Hapusdilaptop saya pas demo gambarnya ga kebuka mba, koneksinya kurang ajib kayanya. tapi gambar yang ga kebuka berjalan dengan baik..
BalasHapusberjalan dengan bagus dan rapi kayak berbaris hen. mana tuh kucing lucu-lucu semua lagi. kirim kucingnya satu dev lewat email.
Hapuspas bnget,lagi perlu,terima kasih mbak :)
BalasHapusharus di catat dulu nih. biar g salah salah. penting nih
BalasHapusapanya yang dicatat mang....orang saya biasanya nyontek dan dikerjakan teman PRnya. heeee
Hapusternyata sederhana penggunaan keyframenya dan itu sudah bisa menimbulkan efek pergerakan yang bagus....
BalasHapustinggal kita berimprofisasi untuk memunculkan suatu yang lebih unik ya dev. ok makasih ilmunya ya sista.
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!
BalasHapusmakasih mbak brrrow manfaat banget
BalasHapus