Cara Mengubah Ukuran Font Dengan jQuery

Hai, ketemu lagi dengan saya, kali ini saya akan membuat tutorial mengenai Cara Mengubah Ukuran Font Dengan jQuery, di dalam sebuah website terkadang banyak orang masih kesulitan untuk membaca sebuah konten, terutama bagi mereka yang mempunyai gangguan penglihatan, salah satu cara supaya mereka bisa melihat konten dengan jelas adalah dengan memberikan ukuran font yang bisa dipilih.berikut adalah cara Mengubah Ukuran Font Dengan jQuery.

Pertama-tama silahkan kalian buat struktur HTML seperti berikut.

<div id="wrapper">
  <div id="controls">
    <a href="#" id="small">A</a>
    <a href="#" id="medium" class="selected">A</a>
    <a href="#" id="large">A</a>
  </div>
<h1>Header 1</h1>
  <h2>header 2</h2>
<p>Lorem ipsum </p>

</div>

Pada bagian paragraf, silahkan kalian bisa isikan beberapa paragraf bebas, kemudian setelah itu, kita atur layout nya dengan kode CSS3 berikut ini supaya terlihat lebih rapi dan bagus.

*      {  margin:0; padding:0;
  font-family:Arial, Helvetica, sans-serif; text-decoration:none;}

body       {  background:#e7e7e7;}

#wrapper   {  width:400px;
              margin: 0 auto;
              padding:40px;
              background:#fff;
              box-shadow:0 0 50px 0 rgba(0,0,0,.25);}

#controls  {  float:right;
              padding:2px;
              width:25px;
              background:#333;
              position:fixed;
              margin:0 0 0 440px;
              text-align:center;
              transition:.25s ease-out;}

#controls a
           {  font-size:24px;
              color:#aaa;
              display:block;
              font-weight:bold;
              padding: 5px;}

#controls a:hover
           {  color:#fff;
              background:#000;
              transition:.25s ease-out;}

a.selected  {  background:#000;
               color:#fff !important;}

#small     {  font-size:10px !important;}
#medium    {  font-size:14px !important;}
#large     {  font-size:18px  !important;}

.small     {  font-size:75%;}

h1         {  font-size:36px;
              font-weight:bold;}

h2         {  font-size:24px;
              margin: 10px 0;}
 
p          {  font-size:14px;
              line-height:20px;}

Kalo sudah, selanjutnya kita buat, fungsi untuk mengubah ukuran font nya dengan kode JS berikut.

$(document).ready(function(){
  
  $("#small").click(function(event){
    event.preventDefault();
    $("h1").animate({"font-size":"24px"});
    $("h2").animate({"font-size":"16px"});
    $("p").animate({"font-size":"12px", "line-height":"16px"});
    
  });
  
  $("#medium").click(function(event){
    event.preventDefault();
    $("h1").animate({"font-size":"36px"});
    $("h2").animate({"font-size":"24px"});
    $("p").animate({"font-size":"14px", "line-height":"20px"});
    
  });
  
  $("#large").click(function(event){
    event.preventDefault();
    $("h1").animate({"font-size":"48px"});
    $("h2").animate({"font-size":"30px"});
    $("p").animate({"font-size":"16px", "line-height":"20px"});
    
  });
  
  $( "a" ).click(function() {
   $("a").removeClass("selected");
  $(this).addClass("selected");
  
 });

});

Nah, kalo sudah semua diketikan, simpan terlebih dahulu, kemudian silahkan buka pada browser masing-masing dan lihat hasilnya.

Baik, itulah tutorial mengenai Cara Mengubah Ukuran Font Dengan jQuery, semoga bermanfaat, amin.

Selamat mencoba 🙂

Cara Mengubah Ukuran Font Dengan jQuery

Kategori