Resize Text Functionality using JavaScript

Hello Coders! Welcome to JavaScript Animation Blog. In this, we're going to see how to create a functionality in Javascript which allows us to resize the font size according to user preference. You might have seen this in many blog reading websites or even Kindle provides while reading a book.

Here's a preview-

That being said, let us get started.

Step - 1: Like always, create 3 files - index.html , style.css and script.js.

Step - 2: Copy the below HTML code and paste it into your code editor.

HTML


<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Resize Fonts jQuery</title>
  <link rel="stylesheet" href="style.css">

</head>
<body>

<div class="container">
  <div class="control">
    <a href="#" id="small">A</a>
    <a href="#" id="medium" class="active">A</a>
    <a href="#" id="large">A</a>
    <a href="#" id="max">A</a>
  </div>
  <h1>Heading</h1>
  <h2>Sub-Heading</h2>
  <p>Lorem ipsum dolor sit amet, pri ne periculis definiebas, habeo gloriatur has id. Ius ad ubique animal, eum recteque electram explicari no, sed in nostrum adipiscing. Lorem ipsum dolor sit amet, pri ne periculis definiebas, habeo gloriatur has id.</p>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script  src="script.js"></script>

</body>
</html>

Step - 3: Below is the CSS code for styling.

CSS


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
}
body{
    background: #f6f7fc;
    display: flex;
    align-items: center;
    justify-content: center;
}
.container{
    width: 100%;
    max-width: 400px;
    background: linear-gradient(315deg, #485461, #28313b);
    margin-top: 5%;
    padding: 40px;
    box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.55);
    border-radius: 50px;
}
.control{
    float: right;
    padding: 2px;
    width: 25px;
    background: #333;
    position: absolute;
    margin: 8px 0 0 440px;
    text-align: center;
    transition: 0.25s ease-in-out;
}
.control a{
    font-size: 24px;
    color: #aaa;
    display: block;
    font-weight: bold;
    padding: 5px;
}
.control a:hover{
    color: #fff;
    background: #000;
    transition: 0.25s ease-in-out;
}
a.active{
    background: #000;
    color: #fff;
}
#small{
    font-size: 10px;
}
#medium{
    font-size: 14px;
}
#large{
    font-size: 18px;
}
#max{
    font-size: 24px;
}
h1,h2,p{
    color: #fff;
}
h1{
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 15px;
}
h2{
    font-size: 24px;
    margin-bottom: 10px;
}
p{
    font-size: 14px;
    line-height: 20px;
}

Step - 4: Below is the JS code for the functionality.

JS

$(document).ready(function(){

    $('#small').click(function(e){
        e.preventDefault();
        $('h1').animate({ "font-size" : "24px" });
        $('h2').animate({ "font-size" : "16px" });
        $('p').animate({ "font-size" : "12px" });
    });

    $('#medium').click(function(e){
        e.preventDefault();
        $('h1').animate({ "font-size" : "36px" });
        $('h2').animate({ "font-size" : "24px" });
        $('p').animate({ "font-size" : "14px" });
    });

    $('#large').click(function(e){
        e.preventDefault();
        $('h1').animate({ "font-size" : "48px" });
        $('h2').animate({ "font-size" : "30px" });
        $('p').animate({ "font-size" : "16px" });
    });

    $('#max').click(function(e){
        e.preventDefault();
        $('h1').animate({ "font-size" : "56px" });
        $('h2').animate({ "font-size" : "42px" });
        $('p').animate({ "font-size" : "24px" , "line-height" : "26px"});
    });

    $("a").click(function(){
        $("a").removeClass("active");
        $(this).addClass("active");
    })

})

And that's it. You're done.

Let me know in the comments if you have any doubt related to this.

Follow @creocodigo for more projects and web related content.

If you find this useful, below are some other posts that I am sure you'll love