السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
masih semangat kan untuk belajar coding nya heheh ^_^
alhamdulillah saya masih di beri kesehatan dan kesempatan untuk menulis lagi di blog ini :D
karena kurangnya waktu luang saya maka dari itu saya masih ingin membagikan suatu animasi yang di buat oleh css.
kalau pada tutorial sebelumnya animasi yang terakhir kita buat adalah Membuat Animasi Semut Berjalan Dengan CSS yang bisa anda lihat tutorial dan demonya DISINI
Nah pada hari ini animasi yang akan saya buat adalah animasi binatang yaitu Animasi Kucing Berjalan Dengan CSS, Pada animasi kali ini saya masih menggunakan fitur terbaru dari css 3, oh iya sekali lagi saya ingatkan animasi ini bukan buatan saya melainkan salah seorang programmer yang berasal dari negara USA yang bernama Rachel Nabors
seperti biasa karya beliau sengaja saya share disini karena saya menyukainya dan supaya kita semua dapat menikmati karyanya,
perlu di ingatkan animasi css ini hanya dapat di lihat pada browser yang sudah support HTML5 dan CSS3.
Oke, tidak usah berlama-lama lagi langsung saja ikuti tutorial Cara Membuat Animasi Kucing Berjalan Dengan CSS dengan baik dan benar..
1. Membuat File HTML
seperti tutorial-tutorial sebelumnya untuk membuat animasi jangan lupa untuk membuat file htmlnya terlebih dahulu, file html memang sangat penting untuk membuat aplikasi berbasis web, jadi silahkan anda buat file html bernama index.html, lalu ketikkan script di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Kucing Berjalan</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="foreground"></div>
<div class="midground">
<div class="tuna"></div>
</div>
<div class="background">
</div>
</body>
</html> Cukup simple kan file HTML nya :D
Seperti biasanya sebelum membuat stylenya silahkan anda coba dulu membuka file htmlnya,
ya benar hasilnya tidak ada apa-apa alias blank dan belum ada animasi Kucing Berjalan nya
agar terbentuk Animasi Kucing Berjalan nya Silahkan ikuti langkah selanjutnya
2. Membuat File CSS
file css memang sangat penting untuk membuat hal yang menarik di website, ya karena tanpa file css kita tidak akan bisa membuat animasi tersebut. silahkan anda buat file bernama style.css setelah itu ketikkan script di bawah ini :
.tuna {
animation: walk-cycle 1s steps(12) infinite;
background: url(http://stash.rachelnabors.com/img/codepen/tuna_sprite.png) 0 0 no-repeat;
height: 200px;
width: 400px;
position: absolute;
bottom: 1px;
left: 50%;
margin-left: -200px;
transform: translateZ(0); /* offers a bit of a performance boost by pushing some of this processing to the GPU in Safari*/
}
@keyframes walk-cycle {
0% {background-position: 0 0; }
100% {background-position: 0 -2391px; }
}
.foreground, .midground, .background {
width: 100%;
height: 100%;
position: absolute;
top: 0; left: 0;
translate3d(0,0,0);
}
.foreground {
animation: parallax_fg linear 10s infinite both;
background: url(http://stash.rachelnabors.com/24ways2012/foreground_grass.png) 0 100% repeat-x;
z-index: 3;
}
@keyframes parallax_fg {
0% { background-position: -3584px 100%;}
100% {background-position: 0 100%; }
}
.midground {
animation: parallax_mg linear 20s infinite;
background: url(http://stash.rachelnabors.com/24ways2012/midground_grass.png) 0 100% repeat-x;
z-index: 2;
}
@keyframes parallax_mg {
0% { background-position: -3000px 100%;}
100% {background-position: 0 100%; }
}
.background {
background-image:
url(http://stash.rachelnabors.com/24ways2012/background_mountain5.png),
url(http://stash.rachelnabors.com/24ways2012/background_mountain4.png),
url(http://stash.rachelnabors.com/24ways2012/background_mountain3.png),
url(http://stash.rachelnabors.com/24ways2012/background_mountain2.png),
url(http://stash.rachelnabors.com/24ways2012/background_mountain1.png);
background-repeat: repeat-x;
background-position: 0 100%;
z-index: 1;
animation: parallax_bg linear 40s infinite;
}
@keyframes parallax_bg {
100% { background-position-x: 2400px, 2000px, 1800px, 1600px, 1200px;}
}
body {
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%),
#d2d2d2 url(http://stash.rachelnabors.com/24ways2012/background_clouds.png);
} Lihat scriptnya lebih pendek dari animasi-animasi sebelumnya kan . :D
jika sudah selesai silahkan anda simpan file cssnya lalu cobalah jalankan file index.html nya,
dan lihat lah hasilnya :D
Demikianlah Cara Membuat Animasi Kucing Berjalan Dengan CSS, keren bukan ? :D
sebelumnya saya mohon maaf karena pada animasi kali ini saya tidak sempat membuat demonya,
jadi silahkan anda coba sendiri untuk mengetahui hasilnya.
Baiklah mungkin itu saja yang dapat saya sampaikan kurang lebihnya mohon maaf :D
Semoga apa yang saya sampaikan disini dapat bermanfaat bagi anda semua :D
bookmark dulu ah buat praktek besok..
Replykeren banget gan
Replykeren banget gan
Replynice info gan, tutorialnya sangat mudah dipahami
Replypatut di coba nih
Replykeren gan,makasih tutornya.. :D
ReplyMakasih gan infonya. Izin praktek! :)
ReplyWAH SANGAT MENARIK, bisa di terapkan di blog saya nih
ReplyMenarik mas, ijin coba
ReplyOia gan, coba dibuatkan link download utk source codenya sekalian, biar mudah bagi orang yg males :)
Replygan kalo saa buat di mode offline bisa ngak ya?
ReplySangat Menarik um ntuk dicoba
Replyijin praktek bro
Replywah keren patut di coba nih gan :D
Replykeren dah, kemari semut sekarang kucing, mantap :)
ReplyKeren gan posting, ane coba dulu gan :v
Replywuiiiih keren gan
Replysetelah saya pasang di blog saya yg baru bagus juga mas..... terima kasih sudah share.....
ReplyKeren post nya gan
ReplyNyoba ah, sekalian belajar
ReplyJujur kurang tau soal beginian :v
Replykeren cssnya gan. perlu di bookmark nih
ReplyBisa dicoba ini..
ReplyKeren gan, langsung ane pasang di blog
Replywah keren, bisa saya coba buat menarik pengunjung agar betah di blog hehe
Replypatut di coba ni gan
Replymenarik gan, mau praktekin dulu
Replybagus gan, btw ente belajar dari mana gan? ...
Replynice infox gan..
Replykeren blognya gan
Replybisa request burung ga ?
ReplyMantap ni. Bookmark dulu buat belajar coding
ReplyNice Post. jadi bertambah ilmunnya :D
ReplyNjirrr mantep nih mas tutornya sangat bermnfaat bagi saya yang gaptek ini wkwkwk salam kenal yah mas
Replykeren bro betnuk CSS nya ane udah nyoba
ReplyKeren Nih gan :) , Saya Coba Dulu :D
Replyseru nih gan kalo di coba :D
Replycool bisa buat game nih!!!! :)
Replywah mantep gan saya coba nih gan
Replylucu juga gan bisa buat animasi kucing bgini :D hehe tapi kalau kucingnya warna hitam, yaa serem juga sih hehe
Replywah agan ini benar2 mastah coding keren gan hhe
ReplyWah kayaknya keren tuh mz...
ReplyWah kayaknya keren tuh mz...
ReplyIzin copy nih script code nya...hehehe
Replymantap gan izin praktek biar tampilan blog ane tambah kece :D
ReplyThank gan tutorialnya
Replysangat membatu bagi saya yang masih newbie
thanks sob tutorialnya nih, ijin mencoba tutorialnya sob :)
ReplyPatut di coba nih, jkeren animasinya
ReplyBookmark dulu dehh... secara ane suka animasi
ReplyWew baru lagi nih tapi sayang ga ada demonya , ane langsung coba dah :v
Replyjadi pengen nyoba, warna kucingnya bisa diganti2 gan?
ReplyKeren. nyoba dolo gan
Replyanimasi kucingnya langsung di praktekin gan.
Replyunik gan... btw bg nya bisa diganti dengan file lokal dari PC kita kan? Bisa jelasin sintaksnya?
Reply