Wahyudi Blog !: Amazing CSS3 Animation Demos

Berikut ini adalah kumpulan efek efek keren dari CSS3. Jadi CSS3 ini dapat juga digunakan untuk menampilkan animasi atau efek efek khusus untuk mempercantik web atau sebagai pengganti efek efek JavaScript maupun flash yang dirasa memberatkan.

Untuk melihat/menampilkan efek ini, Kita memerlukan browser WebKit seperti Safari, firefox dan Chrome (maaf untuk para pengguna Internet Explorer). Cekidot...!!!

CSS3 Clock With jQuery

Kalo kita sering lihat jam analog menggunakan flash, nah yang ini menggunakan CSS3 dengan bantuan jQuery.

Analogue Clock

Analogue clock dibuat dengan webkit transition dan transform CSS. JavaScript hanya digunakan untuk mencocokkan waktu sesuai dengan settingan komputer.

Multiple 3D Cubes (Slide In/Out)

Box 3D berikut ini akan bergerak ketika mouse diarahkan pada salah satu box tersebut.

CSS3 Accordion

Efek accordion hanya menggunakan CSS. Animasi ini dapat dijalankan di browser berbasis WebKit terbaru dan bekerja dalam browser yang mendukung :target pseudo-class.

Auto-Scrolling Parallax

Dalam demo ini memperlihatkan efek layaknya kita sedang berada di luar angkasa dimana bintang bintang/benda angkasa akan bergerak di dalamnya. Efek animasi ini menggunakan CSS dan TIDAK menggunakan JavaScript seperti efek efek sejenis lainnya.

Image Gallery

Disini diperlihatkan bagaimana sebuah image gallery dapat ditampilkan dengan cara yang berbeda. Efek ini menggunakan CSS.

Matrix

Biasanya efek seperti ini ditampilkan dalam bentuk image animasi(.gif) dan flash, tapi efek Matrix ini menggunakan CSS dengan text horisontal.

7 Javascript-effect Alternatives Using CSS3

7 efek menarik JavaScript yang diimplementasikan menggunakan CSS.

Image Hover Effects

Disini diperlihatkan bagaimana image yang dipasangi efek efek image hover yang berbeda menggunakan CSS dan webkit.

Turning Coke Can (Control With Scrollbar)

Disini diperlihatkan bagaimana image ditampilkan secara penuh disemua sisinya. Dengan menggeser scrollbar maka kita akan tau bagaimana tampilan disisi yang lain misal sisi di belakang kaleng tersebut.

3D Meninas

Penyajian gambar secara 3D berikut begitu mengesankan karena hanya menggunakan CSS bukannya flash pada umumnya. Dengan menggerakkan kursor ke kanan maupun ke kiri akan terlihat bagaimana gambar tersebut bergerak solah olah kita berada di dalamnya.

Polaroid Gallery

Sama seperti Image Gallery namun gambar disini akan bergerak saat cursor diarahkan ke gambarnya.

Space

Yang satu ini adalah graphic intense dan membutuhkan waktu untuk meloading object/beban, tetapi hasilnya adalah keren..!

Mac Dock

Icon icon yang ditata apik seperti layaknya Mac Dock kini dapat diterapkan pada web hanya menggunakan CSS.

Drop-In Modals

Wah, kalau yang ini lihat sendiri bagaimana keren-nya efek efek yang ditampilkan yang hanya dibuat menggunakan CSS dengan sedikit JavaScript.

Sliding Vinyl

Mengambil sampul album standar, sedikit HTML, dan beberapa transisi CSS3 dan mengubahnya untuk menciptakan efek sliding vinyl untuk memamerkan musik yang disuka.

Zooming Polaroids

Disini menggunakan beberapa CSS2 dan CSS3 yang dasyat untuk mengubah kumpulan gambar sederhana ke dalam satu set penuh gambar Polaroid.

Falling Leaves

Efek daun daun yang berguguran ini dibuat menggunakan CSS. Cekidot.

Spotlight Cast Shadow

Gerakkan kursor kamu di atas kotak untuk menampilkan bayangan dengan lampu sorot. Demo ini menggunakan properti CSS text-shadow, didukung Safari, Firefox 3.5, Opera, dan Chrome.

Colorful Clock

Jam keren yang berikut ini dibuat menggunakan CSS dan jQuery.

Lightbox Gallery (Draggable)

Selain menggunakan CSS, Image Gallery yang satu ini juga menggunakan Lightbox dan fitur lainnya yang membuatnya menjadi lebih menarik.

Elastic Thumbnail Menu

Efek ini bisa juga digunakan untuk deretan menu menu yang menggunakan gambar/image.

Coverflow

Biasa menu menu yang seperti ini menggunakan flash namun yang satu ini hanya menggunakan CSS.

Snowflakes

Biasanya efek efek yang sejenis menggunakan JavaScript untuk membuat animasinya, namun Snowflakes ini menggunakan CSS.

jQuery DJ Hero

Yang ini bisa membuat kita serasa DJ betulan....
Dibuat dengan CSS dan jQuery

Dynamic Stacking Cards

Langsung cekidot aja lah...
Bingung njelasinnya...

Another Image Gallery

Ini juga Image Gallery lain yang gak kalah keren...

Snow Stack (Control With Arrow Keys)

Image Gallery biasanya menggunakan kursor mouse untuk berpindah pindah, namun berbeda dengan yang satu ini. Untuk berpindah pindah gambar harus menggunakan "Arrow key" atau tombol panah ke atas, bawah, kanan, maupun kiri.