Web programmer seringkali membuat website interaktif dengan memakai flash. Sayangnya tidak semua browser dilengkapi Flash Player secara built-in, sehingga browser harus lebih dulu di install Flash Player untuk menjalankan animasi buatan anda.
Untungnya seiring kemajuan teknologi, web programmer tidak membutuhkan Flash lagi ketika membuat website yang interaktif. Contohnya adalah 10 percobaan pada platform online coding CodePen berikut ini. CodePen sendiri adalah code editor yang berjalan pada browser yang dapat memberikan preview secara otomatis.
Dibuat oleh Julian Garnier, animasi model tata surya ini memperlihatkan 8 planet dalam susunan tata surya mengitari matahari dalam pandangan 3D.
Mengadaptasi animasi flash yang sebelumnya sudah ada, gambar ikan paus ini akan mengikuti kemana arah kursor Anda. Diago Leme membuatnya hanya menggunakan gambar dalam bentuk format ekstensi .SVG dengan tambahan code Javascript. Dalam hal ini, Diago Leme memperlihatkan bagaimana bentuk-bentuk sederhana dapat disulap menjadi karya yang menakjubkan.
Menu ini sebenarnya terlihat seperti menu-menu website pada umumnya, sampai Anda melakukan scrolling dan menemukan bahwa menu ini terbuat dari jelly. Karena background menu di balik gambar akan melengkung ketika Anda melakukan scroll dan menghasilkan efek seperti jelly yang kenyal.
Pertama kali terlihat, tombol yang ditampilkan seperti tombol yang terbuat dari bahan karet. Dan ketika Anda mencoba untuk melakukan klik pada salah satu tombol, Anda akan menemukan sebuah tombol dengan efek animasi yang bisa saya bilang sangat menakjubkan. Dengan hanya menggunakan scripts HTML dan CSS, si programmer mampu membuat tombol jadi sangat realistis beserta animasi yang tentu saja tanpa flash.
Animasi sticky note yang terkelupas ketika Anda mendekatkan cursor pada sticky note. Yang hanya dibuat menggunakan HTML dan CSS.
Draggable overflow memungkinkan Anda untuk membuat batas dimana teks akan ditampilkan hanya menggunakan satu baris kalimat. Dan pada batas teks ditampilkan, teks akan memudar ketika Anda melakukan scroll dengan men-drag teks ke kanan dan ke kiri.
Pada percobaan ini, programmer membuat bola-bola yang berkumpul menjadi seperti hidup dan seperti takut dengan kursor mouse Anda. Ketika Anda mencoba mendekatkan cursor ke sekumpulan bola tersebut, maka bola akan berusaha untuk menjauh.
Tearable Cloth seperti sebuah tirai kain yang dapat Anda robek. Tidak hanya dapat Anda robek, Anda juga dapat mengoyaknya dengan sangat brutal dengan melakukan klik dan tarik pada kain hingga potongan-potongan kain terpantul ke segala arah.
Percoban ini seperti sebuah kereta pembawa barang tambang yang meluncur melewati lorong bawah tanah yang berliku liku. Dan dibuat hanya dengan beberapa baris code HTML dan JS.
Terlihat seperti sebuah komet yang meluncur tak tentu arah, hingga Anda membuat sebuah titik dengan melakukan klik yang selanjutnya menjadi gravitasi dan akan menarik komet komet yang berterbangan tersebut. Anda juga dapat membuat titik gravitasi baru yang bisa Anda gabungkan pada titik gravitasi yang lain, dan membuat gaya gravitasi menjadi lebih besar hingga menarik semua komet berputar di dalam titik gravitasi tersebut. Hingga titik gravitasi pada akhirnya akan meledak.
Featured on MEBISO
sumber: http://www.creativebloq.com editor: Taufik M. Aditama
Comments
Post a Comment