Hai Sobat CAN Creative, Dunia UX kini semakin berkembang dan dikenal oleh banyak orang. Saat ini banyak UX Designer yang menerapkan konsep animate pada website yang dikerjakannya. Biasanya ada 2 cara yang UX Designer lakukan dalam mendesain sebuah website.
- UX designer akan membuat sebuah user interface yang user friendly
- membuat animasi dan transisi yang interaktif
Animasi dan transisi menjadi salah satu hal yang penting dalam sebuah desain website. Pada dasarnya manusia merupakan makhluk visual dimana akan senang jika objek yang dilihatnya menarik dan indah. Dengan sebuah animasi, website dapat menarik audiens dari sisi visual. Animasi dan transisi ini juga akan memberi kepuasan tersendiri kepada pengguna dan membantu pengguna dalam memahami penggunaan website.
Manfaat adanya animasi pada sebuah website berupa membawa kehidupan kepada user interface, membuat website lebih interaktif, meningkatkan pemahaman yang lebih baik mengenai penjelasan pada suatu website, dan tentunya lebih nyaman saat digunakan. Animasi yang menyenangkan juga dapat membantu mengalihkan pandangan pengguna saat sedang menunggu sistem memuat halaman, karena pengguna akan lebih fokus pada animasi yang menyenangkan.
CSS adalah salah satu perangkat lunak yang biasanya digunakan dalam membuat style atau desain pada website. Dengan menggunakan CSS, website yang dibuat bisa lebih berwarna-warni dan fontnya lebih beragam. Selain itu, CSS juga menyediakan Library CSS Animation untuk membuat animasi pada website.
Jika kita ingin memasukkan animasi ke dalam desain website, maka kita bisa menggunakan library animasi. Library CSS Animation adalah repositori online dari pihak ketiga yang bersifat open source dan berisi file animasi yang sudah jadi. Ada banyak contoh Library CSS yang bisa digunakan untuk membuat animasi dengan mudah diantaranya : Animate.css , Hover.css , CSSshake , Magic Animation, Hint.css , Vivify , Wicked CSS , Animista , Angrytools , cssanimation.io dan masih banyak lagi. Pada artikel ini kita akan berfokus pada pembuatan animasi website menggunakan animate.css
Animate.css merupakan salah satu library animasi yang popular dan sudah banyak digunakan oleh para UX designer. Library ini berisikan lebih dari 77 animasi CSS yang siap pakai mulai dari transisi dasar seperti Bounce dan Fade-in hingga animasi yang kompleks dan menarik. Animasinya bisa digunakan untuk sliders, home pages, attention-guiding hints, dan lain-lain.
Library CSS Animation ini juga simple, size memory tidak terlalu besar, dan juga bisa lintas browser sehingga banyak disukai oleh banyak orang. Karena kompatibilitasnya untuk lintas browser, maka tidak ada batasan dalam penggunaan, kita bisa menggunakan ponsel seluler maupun PC. Selain itu animate.css juga sudah terintegrasi dengan baik dan juga memiliki komunitas yang besar sehingga materi dan ilmu yang dicari bisa ditemukan dengan mudah.
Langkah-langkah menggunakana animate.css :
- Install library animate.css di laptop
- Buka file index,html atau file utama pada web yang berisi full body html
- Pada tag <head> bisa ditambahkan baris kode seperti berikut untuk memanggil file animate.css ke dalam website
<head>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head>
- Cari elemen yang akan diberikan animasi misalnya saja seperti ini
<h1 class="animate__animated animate__bounceLeft">OlShopku Animated Element </h1>- Simpan dan jalankan pada browser, maka akan menghasilkan efek animasi bounce
Penggunaan animate.css ini cukup mudah karena cukup menambahkan class css yang disediakan oleh animate.css pada element html tertentu maka akan teraplikasikan efek animasinya. Nah itu dia penjelasan mengenai pembuatan animasi pada sebuah website menggunakan animate.css. Kita bisa menggunakan library lain yang tersebar luas di internet. Apakah Sobat CAN sudah memiliki website yang sudah teraplikasikan dengan animasi ? Jika belum Sobat CAN bisa membuat website kalian dengan tambahan animasi supaya website kalian lebih menarik. Jika dirasa Sobat CAN masih belum bisa mengunakan animasi website ini, jangan takut dan jangan bingung karena disini ada CAN Creative yang siap membantu kalian. Hubungi CAN Creative untuk mendapatkan penawaran menarik. Kami aktif di sosial media facebook CAN Creative, instagram @cancreative dan juga website can.co.id. CAN Creative, Make Things Easier.
