Animasi CD/DVD Promosi dengan CSS 3

CSS atau Cascading Style Sheet telah mengalami perkembangan yang semakin hari semakin menakjubkan. Animasi yang sebelumnya di dominasi oleh file-file flash sekarang sudah mulai ditinggalkan dan para profesional desainer web beralih pada penggunaan jQuery dan CSS 3 sebagai animasi pada tampilan website yang dibuatnya. Selain ukuran file lebih kecil sehingga waktu load halaman lebih cepat juga proses penulisan script yang semakin hari semakin sederhana namun tanpa berpengaruh pada hasil akhir yang tetap menakjubkan. Bagi para pemula yang baru saja berkecimpung di dunia web desain mungkin agak sulit untuk membedakan mana animasi yang dihasilkan dari flash dan mana animasi yang dihasilkan dari jQuery atau CSS 3.

Pada artikel kali ini Blogger Tune-Up tidak akan menyuguhkan animasi menggunakan jQuery tetapi kita akan mengeksplorasi kekuatan CSS 3 dalam menciptakan dan menampilkan animasi pada website. Walaupun hanya menggunakan CSS 3 namun hasilnya sangat menawan dan menarik perhatian sehingga tampilan website akan tampak lebih dinamis dan hidup. Bagaimana animasi CD/DVD promosi ini bekerja? Ketika kita mengarahkan pointer mouse pada cover CD/DVD maka cover akan bergerak kesamping agak miring beberapa derajat. Sedangkan kepingan cakram CD/DVD akan berputar keluar dari cover-nya. Ketika kita menggeser pointer mouse keluar dari cover CD/DVD maka cover akan kembali pada posisi semula. Sedangkan kepingan cakram CD/DVD akan berputar dan masuk kedalam cover-nya.
Penasaran ingin mencoba? Lihat demonya pada link dibawah ini dan rasakan kekuatan animasi yang dihasilkan walaupun hanya menggunakan CSS 3.

Demo Animasi CD/DVD Promosi

Integrasi kode CSS 3 pada Template Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 3:

div.dvd-promo {
width : 940px;
margin : 0 auto 3em auto;
}
div.dvd-promo:after {
content : "\0020";
display : block;
height : 0;
clear : both;
visibility : hidden;
overflow : hidden;
}
div#dvd-promo-wadah {
position : relative;
float : left;
width : 240px;
margin-right : 60px;
padding : 320px 0 1.5em 0;
}
div.dvd-promo img[alt*="Cover"] {
z-index : 2;
position: absolute;
top : 0;
left : 0;
}
div.dvd-promo img[alt*="Disc"] {
z-index : 1;
position: absolute;
top : 70px;
left : 85px;
}
div.dvd-promo a:hover img[alt*="Cover"] {
-moz-transform : rotate(-1deg);
-moz-transform-origin : 50% 100%;
-o-transform : rotate(-1deg);
-o-transform-origin : 50% 100%;
-webkit-transform : rotate(-1deg);
-webkit-transform-origin : 50% 100%;
transform : rotate(-1deg);
transform-origin : 50% 100%;
}
div.dvd-promo a:hover img[alt*="Disc"] {
-moz-transform : translate(40px,0) rotate(300deg);
-o-transform : translate(40px,0) rotate(300deg);
-webkit-transform : translate(40px,0) rotate(300deg);
transform : translate(40px,0) rotate(300deg);
}
div.dvd-promo img[alt*="Cover"], div.dvd-promo img[alt*="Disc"] {
-moz-transition : all .5s ease-in-out;
-o-transition : all .5s ease-in-out;
-webkit-transition : all .5s ease-in-out;
transition : all .5s ease-in-out;
}

Langkah 5
Simpan template dan lanjutkan...

Memasang Animasi CD/DVD Promosi pada Blogger

Langkah 6
Masuk ke "Rancangan - Elemen Laman"
Langkah 7
Tambahkan sebuah widget dengan jenis HTML/JavaScript
Langkah 8
Masukkan (copy paste) kode dibawah ini pada bagian konten pada widget

<div class="dvd-promo">
<!-- awal bagian -->
<div id="dvd-promo-wadah">
<a href="http://modification-blog.blogspot.com">
<img src="http://hosinganda.com/dvd_cover_promo.png" alt="DVD Cover">
<img src="http://hosinganda.com/dvd_disc_promo.png" alt="DVD Disc">
</a>
</div>
<!-- akhir bagian -->
</div>

Langkah 9
Simpan widget dan preview blog anda

Unduh Animasi CD/DVD Promosi

Keterangan:

• Unduh seluruh source code Animasi CD/DVD Promosi dengan CSS 3 pada link diatas
• Ubahlah URL http://modification-blog.blogspot.com sesuai dengan alamat yang anda maksud
• Buatlah sendiri gambar yang anda perlukan dan upload-lah pada situs file hosting anda kemudian gantilah http://hosinganda.com/dvd_cover_promo.png (lihat langkah 8) sesuai dengan alamat URL pada file hosting
• Perhatingkan kode yang diblok pada langkah 8, Cover dan Disc pada tag alt harus selalu tersedia, karena tag ini terkait dengan kode CSS yang ada pada langkah 4 dan digunakan untuk memberikan animasi pada DVD Cover dan DVD Disc
• Jika anda ingin menambahkan jumlah CD/DVD Cover Disc lainnya silahkan tambahkan kode yang diapit tag <!-- awal bagian --> sampai dengan tag <!-- akhir bagian --> namun semua kode penambahan ini harus berada didalam tag <div class="dvd-promo"> dan </div> paling akhir

Selamat mencoba dan semoga berhasil. Happy Blogging :)