Jurnal Web .com

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.

Lihat demo & script

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.

Lihat demo & script

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.

Lihat demo & script

Animasi SVG ikon medikal

Ikon akan terlihat lebih menarik jika bisa bergerak, dulu kita hanya melihat ikon yang statis, sekarang lebih interaktif.

Lihat demo & script

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.

Lihat demo & script

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.

Lihat demo & script

Animasi SVG tanda tangan & nama

Anda bisa membuat animasi pembuatan nama dan tanda tangan dengan menggunakan SVG, tentu akan terlihat menarik.

Lihat demo & script

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.

Lihat demo & script

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

Lihat demo & script

Animasi SVG slideshow gelembung

Dengan SVG ternyata kita juga bisa membuat animasi slider

Lihat demo & script

Animasi SVG perangkat komputer

Animasi ini merupakan animasi pembentukan icon atau gambar berbagai jenis perangkat mulai dari monitor, tablet hingga smartphone.

Lihat demo & script

Klik halaman berikutnya, masih banyak animasi keren lainnya.

Lanjut Halaman: 123