Home » Web Designs » Membuat Responsif Teks Dengan FitText.js

Membuat Responsif Teks Dengan FitText.js

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. :)

fittext responsive text

6 Comments

  1. Nah, ini dia yang saya cari. Makasih mas :)

  2. makasih mas totornya, kalau pakek ini kan ngak perlu ngatur media queries. akhirnya ada yang buat tutorialnya, makasih baget mas…

  3. mas, kalo buat blogspot gimana?

Leave a Reply

Scroll To Top