Ini adalah hal pertama yang mereka cari ketika mereka beralih di antara tab browser. Kami baru saja memberikan salah satu deskripsi yang mungkin dari apa yang disebut favicon. Ruang layar yang menempati tab tab halaman web adalah sumber daya yang jauh lebih berharga daripada yang dipikirkan banyak orang. Jika Anda bekerja dengan baik dengan label, maka, selain terus memainkan peran pengenal halaman, itu bisa menjadi sesuatu seperti "papan pesan" yang memberi tahu Anda apa yang sebenarnya terjadi di halaman.
FaviconFavicons sebenarnya berguna terutama pada tab browser yang tidak aktif. Pertimbangkan sebuah contoh.
Misalkan Anda mengunggah foto yang diambil pada liburan musim panas baru-baru ini ke layanan cloud menggunakan halaman web-nya. Saat foto sedang diunggah, Anda membuka tab peramban baru untuk menemukan detail tentang tempat Anda berada dan menggunakannya dalam keterangan foto. Saat Anda mencari semua ini, satu melekat ke yang lain, dan sekarang Anda menonton Casey Neistat di tab ketujuh browser. Tetapi Anda tidak dapat melanjutkan maraton YouTube dengan aman. Anda melihat halaman layanan cloud secara berkala untuk mengetahui apakah foto Anda sudah diunggah.
Ini adalah kasus ketika Anda bisa menjadi kreatif! Bagaimana jika kita dapat secara dinamis mengubah piksel yang membentuk favicon dan menampilkan informasi tentang proses unggah file pada pintasan halaman? Sebenarnya, inilah yang akan kita lakukan di sini.
Di browser yang mendukung ini, Anda dapat menampilkan beberapa animasi sebagai favicon menggunakan JavaScript, elemen HTML
<canvas> dan aturan geometri kuno.
Inilah tampilan animasi pemuatan di tab browser.
Segera turun ke bisnis dan mulai dengan yang paling sederhana. Yaitu, tambahkan elemen
<link> dan
<canvas> ke kode HTML halaman:
<head> <link rel="icon" type="image/png" href="" width=32px> </head> <body> <canvas width=32 height=32></canvas> </body>
Saat menggunakan teknik ini dalam praktiknya, Anda mungkin ingin menyembunyikan elemen
<canvas> . Salah satu cara untuk melakukannya adalah dengan menggunakan atribut HTML
hidden :
<canvas hidden width=32 height=32></canvas>
Saya akan membiarkan elemen
<canvas> terlihat sehingga kita dapat menonton bagaimana animasi ditampilkan secara bersamaan baik pada favicon dan pada elemen
<canvas> . Keduanya memiliki ukuran favicon standar - 32x32 piksel.
Untuk tujuan demonstrasi, kami akan menambahkan tombol ke halaman, mengklik yang memulai animasi. Tambahkan berikut ini ke kode HTML halaman:
<button>Load</button>
Sekarang mari masuk ke kode JavaScript. Mari kita periksa dukungan
canvas terlebih dahulu:
onload = ()=> { canvas = document.querySelector('canvas'), context = canvas.getContext('2d'); if (!!context) { } };
Berikutnya - sambungkan event handler klik tombol, yang akan digunakan untuk memulai animasi pada elemen
<canvas> :
button = document.querySelector('button'); button.addEventListener('click', function() { n = 0, loadingInterval = setInterval(drawLoader, 60); });
Entitas
drawLoader yang kami
drawLoader ke
setInterval adalah fungsi yang akan dipanggil pada interval 60 milidetik dan menampilkan sesuatu ke elemen
<canvas> . Sebelum kita menulis kode untuk fungsi ini, mari kita gambarkan gaya garis yang akan kita gunakan untuk menggambar kotak secara bertahap, yang merupakan indikator pemuatan.
let gradient = context.createLinearGradient(0, 0, 32, 32); gradient.addColorStop(0, '#c7f0fe'); gradient.addColorStop(1, '#56d3c9'); context.strokeStyle = gradient; context.lineWidth = 8;
Dalam fungsi
drawLoader kita akan menggambar garis berdasarkan berapa persen dari langkah animasi yang telah selesai. Dalam kasus kami, 1 langkah animasi sesuai dengan 1%. Yaitu, selama 25% pertama dari langkah-langkah, garis yang mewakili sisi atas kotak akan ditampilkan secara bertahap. 25% langkah berikutnya akan menampilkan sisi kanan kotak, dan seterusnya - 25% dari waktu animasi di setiap sisi.
Efek animasi dicapai dengan menghapus konten
<canvas> dan menghasilkan garis yang sedikit memanjang dibandingkan dengan langkah sebelumnya. Pada setiap langkah animasi, setelah output gambar ke elemen
<canvas> selesai, gambar dengan cepat dikonversi ke format PNG dan ditetapkan sebagai favicon halaman.
function drawLoader() { with(context) { clearRect(0, 0, 32, 32); beginPath(); if (n<=25){
Sekarang mari kita lakukan perhitungan yang akan membantu kita menggambar garis yang diperlukan.
Berikut data apa yang digunakan untuk secara bertahap menampilkan sisi atas kotak selama 25 langkah pertama animasi:
- Titik awal adalah sudut kiri atas gambar (0,0).
- n adalah jumlah langkah animasi saat ini.
- x adalah koordinat
x dari titik akhir garis pada langkah animasi saat ini. - y adalah koordinat
y dari titik akhir, yaitu 0.
Kita perlu bahwa setelah menyelesaikan semua 25 langkah animasi, nilai
x akan menjadi 32 (yaitu, ukuran favicon dan elemen
<canvas> ). Oleh karena itu, kami akan mencari nilai
x pada langkah animasi saat ini
n sesuai dengan rumus berikut:
x = (32/25) * n
Inilah yang terlihat seperti kode gambar garis di mana penalaran ini diterapkan:
moveTo(0, 0); lineTo((32/25)*n, 0);
25 langkah animasi berikut (menggambar sisi kanan kotak) dilakukan dengan cara yang sama:
moveTo(0, 0); lineTo(32, 0); moveTo(32, 0); lineTo(32, (32/25)*(n-25));
Dan di sini adalah kode lengkap dari fungsi
drawLoader :
function drawLoader() { with(context) { clearRect(0, 0, 32, 32); beginPath(); if (n<=25){ moveTo(0, 0); lineTo((32/25)*n, 0); } else if(n>25 && n<=50){ moveTo(0, 0); lineTo(32, 0); moveTo(32, 0); lineTo(32, (32/25)*(n-25)); } else if(n>50 && n<= 75){ moveTo(0, 0); lineTo(32, 0); moveTo(32, 0); lineTo(32, 32); moveTo(32, 32); lineTo(-((32/25)*(n-75)), 32); } else if(n>75 && n<=100){ moveTo(0, 0); lineTo(32, 0); moveTo(32, 0); lineTo(32, 32); moveTo(32, 32); lineTo(0, 32); moveTo(0, 32); lineTo(0, -((32/25)*(n-100))); } stroke(); }
Ringkasan
Itu saja! Kode untuk membuat indikator pemuatan persegi panjang, yang kami kembangkan di sini, dapat ditemukan di repositori
ini . Dan
inilah repositori dengan kode indikator sirkuler unduhan. Bahkan, Anda, sebagai indikator serupa, bisa menggunakan bentuk apa saja. Dan jika Anda bekerja dengan atribut
fill <canvas> , ini akan memungkinkan Anda untuk mencapai efek yang menarik.
Pembaca yang budiman! Apakah ada proyek di daerah Anda yang akan mendapat manfaat dari animasi favicons?
