Desainer web sering menggunakan animasi web untuk menarik perhatian pengunjung website. Obyek-obyek yang ingin ditonjolkan oleh desainer seperti tombol kontak, sliding banner dan lain-lain biasanya diberi sedikit gerakan untuk menarik perhatian. Menurut Peneliti di Universitas Rochester New York, otak kita secara visual akan lebih memperhatikan obyek yang bergerak. Contohnya saat Kita melambaikan tangan untuk menarik perhatian orang yang kita tuju.
Fungsi Animasi Web
Animasi web dapat digunakan untuk menarik perhatian pengunjung serta mengajak pengunjung untuk berinteraksi. Tentu saja penggunaan animasi ini harus memperhatikan kenyamanan untuk mendapatkan kesan atau pengalaman yang baik. Penggunaan animasi yang terlalu berlebihan dan tidak tepat sasaran justru akan membuat pengunjung buru-buru pergi.
CSS Juga Bisa Untuk Animasi Web
Selain dari segi estetika, penggunaan animasi untuk web membutuhkan pemahaman teknis tentang bagaimana sebuah obyek bisa dianimasi. Pada masa lalu, animasi web banyak didominasi oleh Adobe Flash, namun animasi Flash sudah ditinggalkan karena alasan keamanan serta kompatibilitas. Dewasa ini animasi web banyak menggunakan teknologi lain, salah satunya adalah Cascading Style Sheet (CSS).
Menurut developer.mozilla.org, setidaknya ada tiga keuntungan menggunakan animasi CSS, yaitu
- Mudah digunakan untuk animasi yang sederhana
- Tetap berjalan dengan baik pada sistem yang tidak memiliki resource besar
- Browser bisa mengontrol animasi, misalnya mengurangi frekuensi update animasi pada tab browser yang tidak aktif
Animasi CSS, terutama animasi sederhana seperti bergoyang, berputar, relatif lebih mudah dilakukan dengan CSS. Metode lain seperti JavaScript atau dengan gambar gif cenderung lebih rumit dalam pembuatannya. Animasi CSS menggunakan property dan sub-property animation, yang akan mengatur timing, iterasi, durasi dan detail lainnya. Property ini tidak bekerja sendiri, tampilan diatur dengan @keyframe yang mengatur urutan animasi berdasarkan presentase durasi.
Generator Animasi Web
Untuk membuat animasi CSS yang sederhana dapat dilakukan dengan generator CSS online yang banyak tersedia, salah satunya adalah adalah animista. Kita bisa memilih jenis animasi apa yang Kita inginkan selanjutnya secara otomastis animista akan menampilkan kode CSS untuk animasi tersebut.
Masih Bingung?
Website memang dominan menggunakan HTML, namun jika hanya menggunakan HTML maka tampilannya akan sangat biasa dan membosankan. Disinilah CSS bekerja mempercantik tampilan sebuah website, sehingga konten yang disampaikan dengan HTML ditampilkan dengan menarik. Dengan tampilan yangmenarik, diharapkan pengunjung website memiliki kesan yang baik terhadap website itu sendiri.
HTML dan CSS relatif mudah dipelajari, sehingga dapat menjadi pintu masuk bagi siswa-siswa yang ingin belajar pemrograman. Nantinya siswa-siswa dapat lebih mudah mempelajari bahasa-bahasa pemrograman lain yang lebih rumit seperti JavaScript atau Python.
Di SMK Forward Nusantara, semua siswanya, khususnya program studi TKJ dibekali pengetahuan pemrograman dasar HTML dan CSS. Tujuan mempelajari pemrograman adalah agar setiap siswanya mampu memahami teknologi, dan pada gilirannya mampu memanfaatkan teknologi berkreasi menghasilkan karya nyata.