Contoh animasi SVG keren dan interaktif | Salah satu teknologi website yang cukup menonjol dan menarik perhatian banyak orang beberapa waktu belakangan ini adalah SVG. Penggunaan animasi SVG pada halaman website memang sangat menarik, selain menghemat ukuran file, SVG juga sudah disupport oleh browser modern yang ada saat ini.
SVG semakin membahana pada tahun 2015 lalu dan itu berlanjut hingga kini tahun 2016. SVG bisa menghasilkan grafis vektor yang bisa mengekomodir setiap ukuran layar dari para pengunjung website. Bahkan website sebesar Google mendesain ulang logonya menggunakan file SVG yang lebih kecil ukurannya dan lebih jelas tampilannya.
Jika Anda tertarik ingin mencoba SVG, sekarang adalah saatnya Anda untuk mulai mendalami SVG, karena SVG kemungkinan akan semakin banyak digunakan pada website kedepannya.
Penasaran seperti apa contoh animasi SVG? berikut ini jurnalweb sajikan untuk Anda beberapa animasi SVG yang patut Anda lihat, contoh kodenya pun bisa Anda dapatkan secara gratis dan bisa Anda gunakan untuk bahan pembelajaran.
Tulisan kali ini kami bagi menjadi beberapa halaman karena terlalu banyak menggunakan gambar bisa berat ketika dibuka.
Animasi SVG alat musik drum
Animasi SVG dari alat musik drum ini sangat perlu Anda coba, karena ini menggabungkan animasi SVG dengan musik, jadi ketika di klik gambar drum nya akan menghasilkan suara musik. Wah keren.
Animasi SVG orang berjalan
Animasi ini menampilkan gerakan orang berjalan, sangat sulit membuat animasi seperti ini dahulu, karena harus menggunakan Adobe Flash, namun sekarang bisa dengan mudah dibuat dengan SVG, ukurannya pun tidak besar.
Animasi SVG grafik
Tentu Anda pernah melihat grafik donk, nah tentu akan lebih asik jika grafik tersebut dibuat animasi, maka akan terlihat lebih interaktif, seperti berikut ini.
Animasi SVG ikon medikal
Ikon akan terlihat lebih menarik jika bisa bergerak, dulu kita hanya melihat ikon yang statis, sekarang lebih interaktif.
Animasi SVG carousel
Pernah melihat mainan anak-anak berupa kuda-kudaan yang bergerak melingkar, atau seorang pedagang memajang dagangannya dengan wadah yang berputar-putar. Ternyata animasi seperti itu bisa dibuat dengan SVG lho.
Animasi SVG hitungan mundur (countdown)
Pernah lihat animasi hitung mundur ketika menanti detik-detik perubahan tahun? di Times Square biasanya ada tuh. Nah kita juga bisa membuat animasi seperti itu di website dengan bantuan SVG.
Animasi SVG tanda tangan & nama
Anda bisa membuat animasi pembuatan nama dan tanda tangan dengan menggunakan SVG, tentu akan terlihat menarik.
Animasi SVG buka tutup menu (drawer)
Biasanya kita membuat animasi munculnya menu ini dengan bantuan jquery, namun dengan bantuan SVG ternyata bisa lebih menarik, terlihat lebih realistis.
Animasi SVG pesawat udara
Animasi pesawat ini menggunakan teknik yang cukup menarik, dimana bukan hanya animasi svg namun juga javascript untuk membuat si pesawat mengikuti kemapun kursor kita arahkan, ada juga animasi asap pesawatanya lho
Animasi SVG slideshow gelembung
Dengan SVG ternyata kita juga bisa membuat animasi slider.
Animasi SVG perangkat komputer
Animasi ini merupakan animasi pembentukan icon atau gambar berbagai jenis perangkat mulai dari monitor, tablet hingga smartphone.
Klik halaman berikutnya, masih banyak animasi keren lainnya.
Animasi SVG tumbuhan berkembang
Animasi ini mengilustrasikan berkembangnya tumbuhan mulai dari batang hingga daunnya
Animasi SVG responsive
Animasi yang satu ini menggambarkan bagaimana SVG bisa dibuat menjadi lebih responsive dengan berbagai ukuran namun tidak mengurangi ketajaman vaktornya.
Animasi SVG untuk infografis
Pernah lihat infografis donk, yang biasa kita lihat hanya dalam bentuk gambar statis, namun ternyata jika infografis dibuat dengan tambahan animasi SVG maka hasilnya akan terlihat lebih menatik dan lebih dinamis.
Animasi SVG icon pelajar
Animasi ini menggambarkan bagaimana seorang anak sedang belajar lengkap dengan bukunya, cukup menarik untuk diterapkan pada website pendidikan Anda.
– Baca juga: Kumpulan Logo Yang Dibuat Dengan SVG
Animasi SVG taman bermain
Animasi ini termasuk yang paling kami sukai, karena disini bukan hanya sekedar animasi, namun unsur seninya sangat tinggi. Gambarnya begitu menarik dan halus.
Animasi pada halaman terakhir tidak kalah keren, silahlan dilihat
Animasi CCTV
Animasi CCTV dengan menggunakan SVG ini terlihat sangat lucu, dimana CCTV selalu memantau pergerakan objeknya.
Animasi bola basket
Animasi bola basket dengan svg, sayang tidak ada gerakan yang lebih kompleks selain hanya bola memantul. Namun gambar grafisnya cukup menarik.
Animasi peta kota dengan SVG
Pernah lihat donk gambar peta sebuah kota? dengan bantuan SVG peta tersebut terlihat lebih interaktif.
Animasi UI
Jika Anda seorang desainer yang sering membuat konsep desain, Anda bisa membuat animasi untuk konsep tersebut agar klien Anda bisa lebih mengerti tentang maksud dari konsep yang Anda buat.
– Baca juga: Kumpulan Tools SVG Untuk Web Designer & Developer
Animasi Traveler
Gambar ini cukup menarik untuk menggambarkan berbagai kota yang bisa dikunjungi, sangat cocok untuk website travel yang menyediakan paket liburan ke berbagai penjuru dunia.
Sumber: http://www.jurnalweb.com/contoh-animasi-svg-keren-dan-interaktif-script/3/
0 comments:
Post a Comment