5 Animasi SVG untuk Menghidupkan Desain Web Anda

Animasi dapat membuat situs web terasa apik dan mulus, tetapi bagaimana Anda dapat memasukkan fitur ini ke dalam karya Anda sendiri? Bergabunglah dengan kami dan pelajari cara menghidupkan desain web Anda dengan contoh animasi SVG yang kreatif ini.

Bekerja Dengan Grafik Vektor yang Dapat Diskalakan

SVG adalah format file yang menggunakan garis, bukan piksel, untuk menyimpan dan menampilkan gambar. Seperti namanya, grafik vektor yang dapat diskalakan dapat diskalakan tanpa kehilangan kualitas.

Selain hebat untuk mengubah ukuran, Anda juga dapat menggunakan kode SVG dalam HTML, dan itu akan bertindak seperti elemen lainnya. Ini berarti Anda dapat menggunakan aturan CSS, kode JavaScript, dan, yang terpenting, animasi dengan SVG situs web Anda.

Anda dapat membuat SVG menggunakan perangkat lunak seperti Adobe Illustrator dan situs web seperti SVGator, tetapi Anda juga dapat membuatnya dengan tangan. Format SVG adalah bahasa XML teks biasa dan terlihat sedikit seperti HTML.

Contoh ini menampilkan empat tombol dengan ikonnya sendiri dan latar belakang berwarna blok. Saat Anda memilih tombol, tombol akan berubah dari lingkaran menjadi persegi panjang bulat, sementara juga mengganti warna latar belakang halaman agar sesuai dengan tombol.

Campuran JS dan CSS menghasilkan hasil ini, dan semuanya dimulai dengan loop yang menambahkan pendengar acara ke setiap tombol.

untuk (var saya = 0; i < menuItems.length; saya++) {
 menuItems[i].addEventListener('klik', tombolKlik);
}

Setelah tombol diklik, fungsi yang disebut buttonClick() melakukan beberapa tindakan. Ini dimulai dengan mengubah warna latar belakang halaman:

dokumen.body.style.backgroundColor = `#${ini.getAttribute('data-background')}`;

Setelah ini, ia menambahkan kelas CSS ke tombol yang ditekan, memicu animasi dan mengubah warna latar belakang tombol.

menuItemActive.classList.remove('menu__item--aktif');
this.classList.add('menu__item--aktif');
menuItemActive.classList.add('menu__item--bernyawa');
this.classList.add('menu__item--bernyawa');
menuItemActive = ini;

Meskipun sederhana, contoh animasi SVG ini menawarkan cara unik untuk membuat situs web Anda lebih menarik. Jenis fitur desain ini sangat cocok untuk situs web seluler dan aplikasi berbasis HTML.

Anda dapat menambahkan node sebanyak yang Anda suka ke jalur SVG, menjadikannya ideal untuk membuat teks. Animasi goresan sederhana ini menunjukkan teknik dengan sempurna, dengan teks muncul dari kiri ke kanan seolah-olah sedang ditulis.

Animasi tidak memiliki keyframe, itu hanya menerapkan lebar goresan baru di samping properti transisi CSS. Ini membuat setiap garis menggambar dirinya sendiri di layar tanpa animasi yang rumit.

.jalan-1 {
 stroke-dasharray: 1850 2000;
 stroke-dashoffset: 1851;
 transisi: 5s linier;
}

Fungsi JS menambahkan kelas CSS unik ke setiap bagian teks menggunakan kelas CSS induk tunggal untuk lebih menurunkan kepadatan kode.

$(fungsi() {
fungsianimasiMulai() {
 $('#wadah').tambahKelas('sirip');
 }
setTimeout (animationStart, 250);
});

Sebagai contoh khusus CSS, animasi SVG ini sangat bagus untuk siapa saja yang tidak ingin bersusah payah ke dalam kode JavaScript. Idenya sederhana: sebuah tombol dimulai dengan garis bawah yang berubah menjadi batas penuh saat Anda mengarahkan kursor ke atasnya.

Keyframe CSS membuat dua status untuk tombol. Status pertama memiliki goresan yang lebih tebal dan hanya menutupi bagian bawah tombol bentuk SVG, mulai dari 0%. Status lainnya adalah tombol lengkap pada 100% dengan goresan yang lebih tipis.

@keyframes menggambar {
 0% {
 stroke-dasharray: 140 540;
 stroke-dashoffset: -474;
 lebar goresan: 8px;
 }
100% {
 stroke-dasharray: 760;
 stroke-dashoffset: 0;
 lebar goresan: 2px;
 }
}

Keyframe ini hanya diterapkan ke garis bentuk tombol SVG saat pengguna menggerakkan kursor di atas tombol. Ini menggunakan: arahkan kursor Kelas semu CSS untuk mencapai ini, memicu aturan yang menambahkan bingkai utama animasi ke tombol.

.svg-wrapper: arahkan.membentuk {
-webkit-animasi: 0.5smenggambarlinierke depan;
animasi: 0.5smenggambarlinierke depan;
}

Ini menunjukkan bagaimana Anda dapat membuat animasi yang indah tanpa menggunakan kode yang rumit. Anda dapat menggunakan dasar-dasar ini dan kreativitas Anda untuk membuat elemen interaktif yang lebih rumit untuk situs web Anda sendiri.

Dengan begitu banyak teknik menarik di bawah tenda, sulit untuk memutuskan apa yang harus didiskusikan ketika melihat contoh jam SVG ini.

Untuk memulai, ia menggunakan fungsi Date() untuk mengumpulkan tanggal dan waktu saat ini. Dengan menggunakan nilai ini, fungsi getHours(), getMinutes(), dan getSeconds() membagi data menjadi bagian-bagian yang relevan. Kode kemudian menghitung posisi masing-masing tangan pada jam.

var tanggal = baruTanggal();
var jamSudut = 360 * tanggal.getHours() / 12 + tanggal.getMinutes() / 2;
var menitSudut = 360 * tanggal.getMinutes() / 60;
var detikSudut = 360 * tanggal.getSeconds() / 60;

Dengan menyimpan masing-masing tangan dalam sebuah array, posisinya dapat diatur dengan sangat mudah setiap kali kode dijalankan.

tangan[0].setAttribute('dari', pemindah (secAngle));
tangan[0].setAttribute('ke', pemindah (secAngle + 360));
tangan[1].setAttribute('dari', shifter (sudut menit));
tangan[1].setAttribute('ke', shifter (minuteAngle + 360));
tangan[2].setAttribute('dari', shifter (jamAngle));
tangan[2].setAttribute('ke', shifter (jamAngle + 360));

Waktu memiliki aplikasi terbatas di bidang desain web, tetapi berguna untuk penghitung waktu mundur, jam, dan menyimpan cap waktu. Contoh ini juga menawarkan wawasan tentang pembuatan animasi SVG dinamis dengan variabel.

Animasi SVG berbasis CSS ini menyediakan cara yang rapi untuk membuat bentuk apa pun terlihat luar biasa.

Dengan tidak ada yang dipilih, formulir memiliki garis abu-abu di bawah setiap bidang. Garis muncul saat bidang dipilih, meluncur dari kiri dengan animasi yang halus. Jika pengguna memilih bidang yang berbeda, garis meluncur ke posisi barunya dengan gerakan halus.

Terakhir, setelah pengguna menekan tombol Gabung tombol, garis berubah menjadi lingkaran yang berdenyut saat halaman dimuat.

Contoh SVG ini sangat mengesankan karena hanya mengandalkan CSS untuk menghasilkan hasil yang begitu kompleks. Ini menggunakan variabel CSS untuk menyimpan data, membuatnya lebih mudah untuk mengontrol elemen seperti aplikasi utama.

$app-padding: 6vh;
$lebar aplikasi: 50vh;
$tinggi aplikasi: 90vh;
#aplikasi {
 lebar: $app-width;
 tinggi: $app-height;
 pengisi: $app-padding;
 latar belakang: putih;
 bayangan kotak: 002rem rgba(hitam, 0.1);
}

Anda dapat menggunakan contoh ini di hampir semua formulir web, dan melibatkan pengguna Anda tidak seperti sebelumnya.

Membuat Animasi SVG Anda Sendiri Dengan HTML, JS, dan CSS

Membuat animasi SVG dari awal bisa menjadi proses yang sulit saat Anda pertama kali memulai. Contoh-contoh ini akan memberi Anda awal yang Anda butuhkan untuk membuat animasi SVG yang akan membuat situs web Anda bersinar.

9 Trik CSS Kueri Media Tingkat Lanjut yang Harus Anda Ketahui

Baca Selanjutnya

Tentang Penulis