Membuat Responsif Teks Pragraf pada Conten Website Dengan FitText.js
Perkembangan internet, baik dari segi teknologi maupun penggunanya di dunia ini semakin pesat. Seiring dengan perkembangan tersebut muncul berbagai kebutuhan, terutama bagi yang ingin mempromosikan sebuah brand maupun personal melalui sebuah website. Pada era teknologi sekarang ini tuntutan mobilitas masyarakat yang tinggi dan mayoritas pengguna mengakses internet menggunakan perangkat berbasis mobile dan PC Tablet, maka perlu strategi untuk menciptakan kenyamanan ketika pengguna mengakses sebuah website dengan menggunakan gadget-nya.
Pengertian Web Desain Responsif.
Model baru pengembangan website menentukan lebar browsing pada berbagai perangkat, yang memungkinkan view desain yang bisa kita lihat sekaligus dalam layar PC, handphone, maupun tablet. konsep dari evolusi ini adalah bukan hanya text yang akan sinkron mengikuti layarnya tapi juga gambarnya.
Model baru pengembangan website menentukan lebar browsing pada berbagai perangkat, yang memungkinkan view desain yang bisa kita lihat sekaligus dalam layar PC, handphone, maupun tablet. konsep dari evolusi ini adalah bukan hanya text yang akan sinkron mengikuti layarnya tapi juga gambarnya.
Konsep ini pertama kali diperkenalkan oleh Ethan Marcotte dalam artikelnya yang berjudul " Responsive Web Design" Ethan menuliskan bahwa konsep desain web responsif ada 3 faktor utama, yaitu:
1. Kerangka dasar yang fleksibel (flexible grid).
2. Gambar yang sinkron dengan apapun posisi lebar layar.
3. Melalui media query. Pandangan berbeda (different view) harus enable pada konteksnya.
Klai ini saya membuat artikel tentang 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. anda bisa kunjungi fitText.js di github https://github.com/davatron5000/FitText.js atau website official-nya di http://fittextjs.com
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. anda bisa kunjungi fitText.js di github https://github.com/davatron5000/FitText.js atau website official-nya di http://fittextjs.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Belajar FitText.js</title>
<style type="text/css">
body {
color: #333;
font: 14px/1.8 sans-serif;
background:#eee;
}
.wrapper {
width: 80%;
margin:0 auto;
max-width:1024px;
}
.bar{
width:100%;
background:#444;
padding:5px 20px;
color:#fff;
margin:-10px 0 0 -10px;
border-bottom:2px solid #000;
}
.bar a{
color:#fff; text-decoration:none;
text-shadow:1px 2px 1px #000;
}
.bar a:hover{text-decoration:underline;}
header {
width: 100%;
margin:0px auto;
}
h1 {
text-align:center;
color:#FF3300;
font-family:arial;
font-weight:bold;
line-height:100%;
text-transform: uppercase;
display: block;
margin: 5% auto 5%;
text-shadow:2px 2px 1px #aaa;
font-size: 36px;
}
p{text-align:center;}
</style>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Belajar FitText.js</title>
<style type="text/css">
body {
color: #333;
font: 14px/1.8 sans-serif;
background:#eee;
}
.wrapper {
width: 80%;
margin:0 auto;
max-width:1024px;
}
.bar{
width:100%;
background:#444;
padding:5px 20px;
color:#fff;
margin:-10px 0 0 -10px;
border-bottom:2px solid #000;
}
.bar a{
color:#fff; text-decoration:none;
text-shadow:1px 2px 1px #000;
}
.bar a:hover{text-decoration:underline;}
header {
width: 100%;
margin:0px auto;
}
h1 {
text-align:center;
color:#FF3300;
font-family:arial;
font-weight:bold;
line-height:100%;
text-transform: uppercase;
display: block;
margin: 5% auto 5%;
text-shadow:2px 2px 1px #aaa;
font-size: 36px;
}
p{text-align:center;}
</style>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script type="text/javascript">
$("#judul").fitText(1.5);
$("#paragraf").fitText(2.5, { minFontSize: 7, maxFontSize: '15px' });
</script>
<script src="jquery.fittext.js"></script>
<script type="text/javascript">
$("#judul").fitText(1.5);
$("#paragraf").fitText(2.5, { minFontSize: 7, maxFontSize: '15px' });
</script>
<body>
<div class="wrapper">
<header>
<h1 id="judul">Belajar Menggunakan FitText.js</h1>
</header>
<p id="paragraf">PT Proweb Indonesia selalu mengembangkan diri baik dari segi keahlian maupun infrastruktur yang dipakai dalam memberikan layanan terbaik kepada pelanggannya. Team fulltime PT Proweb Indonesia selalu mengembangkan dirinya supaya kualitas layanannya selalu yang terbaik.
Terkait infrastruktur, PT Proweb Indonesia menggunakan infrastruktur yang memastikan website dan email bisa diakses dengan cepat dengan menggunakan dedicated server dan dedicated bandwidth sendiri.
Sebagai bukti dari layanan yang telah PT Proweb Indonesia kerjakan, PT Proweb Indonesia telah menghasilkan lebih dari 100 website yang bisa dilihat di www.proweb.co.id/portfolio/index.html .</p>
</div>
</body>
</html>
<div class="wrapper">
<header>
<h1 id="judul">Belajar Menggunakan FitText.js</h1>
</header>
<p id="paragraf">PT Proweb Indonesia selalu mengembangkan diri baik dari segi keahlian maupun infrastruktur yang dipakai dalam memberikan layanan terbaik kepada pelanggannya. Team fulltime PT Proweb Indonesia selalu mengembangkan dirinya supaya kualitas layanannya selalu yang terbaik.
Terkait infrastruktur, PT Proweb Indonesia menggunakan infrastruktur yang memastikan website dan email bisa diakses dengan cepat dengan menggunakan dedicated server dan dedicated bandwidth sendiri.
Sebagai bukti dari layanan yang telah PT Proweb Indonesia kerjakan, PT Proweb Indonesia telah menghasilkan lebih dari 100 website yang bisa dilihat di www.proweb.co.id/portfolio/index.html .</p>
</div>
</body>
</html>
Perhatikan Script yang di atas yang ditebalin merupakan pemanggilan pluig jquerynya sedakan teks tebal warna merah merupakan id $("#judul") dan $("#paragraf"pemanggilan yang di eksekusi jquerynya.
Pada kode HTML-nya, masukkan div id yang telah dideklarasikan hasilnya paragrafnya akan mengikutin width sesuai browsernya
untuk demonya silakan download filenya disini
Komentar
Posting Komentar