Examples of Text Animations Using jQuery

In this post, we will go over some text animations we can do using jQuery. We already know we can animate text size using jQuery, so this post will focus more on moving text into the view of the user. This will be done mainly with the help of the jQuery animate() method.

This has become a popular animation on many websites, as it is a way to help catch the user’s attention.

In this example, we will go over how to move text in from the left, right, top, and bottom.

Animating text into view using jQuery

In this example, we will have a simple empty div with a paragraph. We will provide the user with 4 button options, to move text in either from the left, from above, from the right, or from the bottom.

We will need to add some CSS to the div and to the paragraph to start. The rest of the animation will be done using jQuery.

Here is our HTML and CSS setup:

<style>#div1 { position: relative; width: 500px; height: 200px; overflow: hidden; border: 1px solid #444; } #p1 { width: 350px; position: absolute; left: -370px; top: 20px; }
<div id="div1">
  <p id="p1">This is some text we will animate using jQuery.</p>
</div>
<div id="click-me1" class="click-me">Move text in from the left</div>
<div id="click-me2" class="click-me">Move text in from the top</div>
<div id="click-me3" class="click-me">Move text in from the right</div>
<div id="click-me4" class="click-me">Move text in from the bottom</div>

In the jQuery and JavaScript part of this example, we will need to make use of the jQuery animate() method. When the user clicks a button we will run a different function for each.

To animate the position of our paragraph, we will need to target the left property of our paragraph. The first parameter of the jQuery animate method takes the CSS properties we want to animate. The second parameter takes the speed at which we want to animate at in milliseconds.

These are the two parameters we will use of the jQuery animate method and will be all we need to accomplish what we want. We will also animate each way at a different speed.

Here is our JavaScript and jQuery code:

//Move text in from the left
$("#click-me1").click(function(){
  //Since the user can run this example many times, 
  //we must reset the the position of the paragraph 
  //before doing the animation each time
  $("#p1").css("left", "-370px");
  $("#p1").animate({left: "10px"}, 1000);
});

//Move text in from the top
$("#click-me2").click(function(){
  $("#p1").css("left", "10px");
  $("#p1").css("top", "-70px");
  $("#p1").animate({top: "20px"}, 500);
});

//Move text in from the right
$("#click-me3").click(function(){
  $("#p1").css("left", "520px");
  $("#p1").animate({left: "10px"}, 100);
});

//Move text in from the bottom
$("#click-me4").click(function(){
  $("#p1").css("left", "10px");
  $("#p1").css("top", "220px");
  $("#p1").animate({top: "20px"}, 1500);
});

The final code and output for this example is below:

Code Output:

Full Code:

<style>#div1 { position: relative; width: 500px; height: 200px; overflow: hidden; border: 1px solid #444; } #p1 { width: 350px; position: absolute; left: -370px; top: 20px; }
<div id="div1">
  <p id="p1">This is some text we will animate using jQuery.</p>
</div>
<div id="click-me1" class="click-me">Move text in from the left</div>
<div id="click-me2" class="click-me">Move text in from the top</div>
<div id="click-me3" class="click-me">Move text in from the right</div>
<div id="click-me4" class="click-me">Move text in from the bottom</div>

<script>

$("#click-me1").click(function(){
  $("#p1").css("left", "-370px");
  $("#p1").animate({left: "10px"}, 1000);
});

$("#click-me2").click(function(){
  $("#p1").css("left", "10px");
  $("#p1").css("top", "-70px");
  $("#p1").animate({top: "20px"}, 500);
});

$("#click-me3").click(function(){
  $("#p1").css("left", "520px");
  $("#p1").animate({left: "10px"}, 100);
});

$("#click-me4").click(function(){
  $("#p1").css("left", "10px");
  $("#p1").css("top", "220px");
  $("#p1").animate({top: "20px"}, 1500);
});
</script>

Hopefully this article has been useful for you to see some examples of text animations using jQuery.