FitText.js adalah salah satu dari sekian banyak jQuery plugin untuk membuat teks dengan desain yang responsif. Dia akan secara otomatis membuat ukuran font secara fleksibel berdasarkan ukuran viewport sebuah browser. Kamu bisa kunjungi fitText.js di github https://github.com/davatron5000/FitText.js atau website official-nya di http://fittextjs.com

Ada dua parameter dalam FitText.js, yaitu The Compressor dan Min-MaxFont. The Compressor adalah sebuah parameter untuk mengatur efek responsif teks ini akan bekerja dengan nilai standar adalah 1. MinFont dan MaxFont untuk mengatur ukuran terkecil dan terbesar sebuah teks ketika responsif berjalan.

Untuk menggunakan FitText.js ini jangan lupa untuk mendeklarasikan atau memanggil file jQuery agar berjalan dengan lancar.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Kemudian baru memanggil FitText.js dan mendeklarasikan parameternya sesuai kebutuhan. Dalam tulisan kali ini saya contohkan responsif dalam sebuah judul dan paragraf.

<script src="jquery.fittext.js"></script>
<script type="text/javascript">
$("#judul").fitText(1.5);
$("#paragraf").fitText(2.5, { minFontSize: 7, maxFontSize: '15px' });
</script>

Pada kode HTML-nya, masukkan div id yang telah dideklarasikan di javascript sebelumnya.

<h1 id="judul">Belajar Menggunakan FitText.js</h1>
<p id="paragraf">Halaman ini adalah salah satu contoh untuk implementasi FitText.js....dst </p>

Kalau langkah-langkah di atas telah dilewati dengan lancar. Maka otomatis FitText.js akan berjalan dengan baik. Untuk lebih jelasnya, silahkan lihat demo yang telah saya siapkan di bawah ini. Selamat mencoba dan semoga bermanfaat.

Tulisan Terkait: