Visualisasi adalah pendekatan yang kuat dan berpengaruh untuk menyajikan semua jenis data, besar dan kecil. Bagan dan Grafik animasi yang dibuat dengan baik dapat menjadi sangat efektif dalam menjelaskan konsep yang rumit dan menarik pemirsa secara mendalam. Berikut adalah 30 contoh bagan dan grafik yang menarik dan interaktif yang dibangun dengan CSS dan Javascript
Bagan & Grafik Batang Data AnimasiPos terkait
- 10 Plugin Efek Animasi Teks jQuery Keren
- 10+ Pustaka Javascript Untuk Membuat Efek Pengetikan Animasi
- 20 Tutorial CSS Grid dan Flexbox yang Bermanfaat
- 15 Tutorial dan Contoh Animasi Efek Partikel Menakjubkan
- 120+ Tutorial jQuery Terbaik
- 30 Plugin jQuery yang Berguna 2018
- 15 Skrip Indikator Kemajuan Pemuatan Keren
- 20 Framework & Library Javascript UI untuk Pengalaman Frontend yang Lebih Baik 2019
Menghadirkan animasi CSS ke halaman web atau aplikasi Anda membantu memusatkan perhatian pengguna pada elemen desain penting dan, jika dilakukan dengan benar, akan menambahkan sentuhan khusus untuk menciptakan kegembiraan
Ini bisa berupa mikro-animasi untuk umpan balik atau interaksi pengguna, meningkatkan pengalaman dan emosi yang ingin Anda sampaikan, dan menampilkan beberapa kepribadian merek Anda dengan cara yang tidak dapat Anda lakukan dengan segala sesuatu yang statis.
Namun, animasi CSS yang berlebihan akan mematikan getaran dan benar-benar mengganggu. Kelebihan kognitif akan terjadi dan pengguna akan meninggalkan tujuan mereka datang ke situs Anda
Jadikan Grafik Batang dan Diagram Lingkaran Lebih Kreatif dengan Animasi CSS
Saya sedang merancang halaman web laporan interaktif untuk sebuah perusahaan dan kami ingin membuat beberapa gerakan dalam grafik agar lebih menarik secara visual dan menarik untuk dibaca
Saya mulai dengan grafik SVG untuk grafik batang. Setelah bermain dengan ide ini, saya menyadari melalui coba-coba bahwa kita dapat membuatnya sederhana dan menggunakan HTML dasar untuk membangun elemen dan menggunakan data-atribut untuk menampilkan angka, CSS untuk menatanya, dan psuedo-classes untuk menampilkan data-atribut. Ini menghasilkan bobot yang lebih ringan dan struktur kode/pemeliharaan yang lebih mudah
Untuk bagan lingkaran, saya menggunakan SVG karena saya harus mempertahankan kebulatan elemen untuk desain spesifik saya. Mari kita gali grafik batang terlebih dahulu. Pengkodean khusus ini, alih-alih menggunakan plugin, memberi Anda kontrol yang disesuaikan untuk proyek apa pun
Animasi CSS Grafik Batang Horizontal
We start with a Karena saya menjaga persentase setiap grafik batang di atas dan di dalam batang, saya menggunakan atribut data hanya untuk membuatnya mudah. Ini juga dapat diakses. Dalam desainnya, Anda dapat melihat bahwa saya mempertahankan tahun sebagai elemennya sendiri di luar bar. Jika saya menggunakan atribut data dan memposisikannya secara visual di luar bilah, itu akan terpotong dan tidak terlihat Visi di sini adalah menganimasikan lebar bilah dan opasitas angka. Untuk melakukan ini, kami menggunakan bingkai kunci. Untuk persentase data, update saja HTML-nya. Untuk lebar bilah, perbarui masing-masing. pemilih batang The vertical version of the bar graph has the same idea, except we are animating the height instead of the width of each bar graph. The trick here is that if you don’t absolutely position the bar Untuk grafik batang vertikal, kami memindahkan tahun dalam HTML menjadi setelah batang agar tetap berada di bawah grafik batang. Untuk data persentase update saja HTML nya. Untuk lebar bilah, perbarui masing-masing. pemilih batang In my particular case, the design called for two sets of data on one circle chart. If your case only calls for one data point, you can remove the second inner of the SVG (and the CSS to go with it). Mari menganimasikan bagan lingkaran dengan memulai dari atas dan menganimasikan batas berwarna ke bawah dan ke kanan. Anda akan melihat bahwa kami memutar lingkaran -90 derajat. Ini karena jika tidak, itu dimulai dari bawah. Jika Anda ingin lingkaran ini dianimasikan pada posisi yang berbeda, bermainlah dengan properti rotasi Terima kasih kepada Markus Oberlehner untuk inspirasi dan codepen-nya untuk animasi bagan lingkaran Beginilah cara saya membuat kode untuk proyek khusus saya. Saya tertarik jika Anda telah menemukan cara lain untuk membuat animasi yang lebih baik untuk grafik hanya dengan HTML dan CSSAnimasi CSS Grafik Batang Vertikal
Animasi CSS Diagram Lingkaran
Apakah Anda memiliki cara lain untuk menganimasikan grafik batang dan diagram lingkaran?
LIHAT SEMUA