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.
Baca lebih lanjut tentang SVG pada tulisan Jurnalweb berjudul Pengertian, Sejarah dan Keunggulan SVG untuk Website.
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.
Klik halaman berikutnya untuk melihat animasi lainnya
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.
Cara menghafalkan scriptnya bagaimana Gan?
Waduh mas klo dihapalkan semua ya ngga bisa, yang penting paham animasi svg, dan banyak latihan bikin project-project svg sendiri pasti lama-lama bisa. “Practices Makes Perfect”
cara masangnya gimana?