jQuery Popping Up Text Effect


Read {count} times since 2020

If you are creating a web app and there is conversation to the user without audio and just text, animations and effect will make the app better.

In this short post, I’m introducing a simple text effect without any trouble at all. All it does is animate the text’s font size. But, the effect is like the text is popping up.

Here’s the code. It’s wrapped in a function and you can easily customize it :

function pop_up(){
  var begin_size = 10;
  var end_size = 60;
  var speed = 3000;

  $("<strong>.container</strong>").css("font-size", begin_size).animate({"font-size" : end_size}, speed);
}
pop_up();

In the above code, it is assumed that the element .container has text inside it.

What it does is change the font size to a smaller one, then animate the font-size value to a bigger one.