jQuery Quickie: Smooth animated quote display

Placed in: Home

Programming

Webdesign

Cialis Online

jQuery Quickie: Smooth animated quote display

Time for yet another jQuery quickie! These relatively simple jQuery tutorials will show you a simple, yet beautiful effect making use of jQuery. This way, you can learn and create something very cool at the same time.

A couple of days ago, I saw a commercial on TV showing some quotes from people displayed in boxes. I wanted to take that concept, and bring it to the web using my favorite JavaScript framework. Today, we'll learn how to create a smooth animated quote display for you to use!

Simply check out the demo to see what we're going to create. Download the source code to learn how it works, or read the tutorial for more explanation.

Sadly, fonts will render different in several browsers. I've tested this script (and made it working for) on Firefox, Chrome and Safari (even the iPhone displays it correct). Other browsers aren't tested, but the video below also shows how the animation should look like.

Ready to take a look at how this example works? Let's dive under the hood!

Video

Here's a video of the quickie, showing off the effect (as it should look like) in Firefox.

Now let's see how we can create this!

The idea

It always starts with a little idea. Here's a sketch of what I was thinking of creating.

Seems reasonable, right?

HTML

Alright, we'll start with the backbone of our page: The HTML. This is what I came up with.

 
<div id="quotebox">
   <p class="quotemark leftquote">&#8216;&#8216;</p>
   <div class="quote"></div>
   <p class="quotemark rightquote">&#8217;&#8217;</p>
</div>

Take note of the classes and ID's used - they'll be referenced by the CSS/JavaScript later on. The .quote will get the content injected by jQuery.

I've made use of the single quote (') instead of the double quote ("), because I can place them tighter to each other using the CSS. Since we enlarge the two quotes to a huge size, the spaces between them when using a double quote would be huge as well. But by using the single quote and some CSS, we can still place them closer to each other.

CSS

Since we're already talking about CSS, here's the most important part:

 
.quote { display:none; float:left; height:69px; }
.quotemark { display:none; float:left;
   font:bold 300px Helvetica; letter-spacing:-35px; line-height:300px; }

As you can see, we set the letter-spacing to a negative value to place the quotes a lot closer to each other. Take note of the display : none: it'll be un-hidden by jQuery.

So far, not many advaced features are shown. The real magic is taking place in the jQuery parts, so let's dive into that!

jQuery

So let's dive into the jQuery part, step by step. I've added comments in the source code to explain what it does. First, I've defined some variabled to easy change the behaviour of the script.

 
// Speed of the quotation marks to show
var quoteSpeed = 500;
 
// Speed of the quote container to expand
var quoteContainerSpeed = 1000;
 
// Time the quote will be visible
var showQuoteSpeed = 5000;
 
// Time the screen will be empty
var cleanScreenSpeed = 500;
 
// Width of the quote box
// Would be cool to automatically grow to the containing text size in the future.
var quoteBoxWidth = "300px";
 
// The quotes we'll show
var quotes = [ {
      "quote" : "Java is to JavaScript,<br />what Car is to Carpet.",
      "author" : "- Chris Heilmann"
   }, {
      "quote" : "Computers are good at following instructions, but not at<br />reading your mind.",
      "author" : "- Donald Knuth"
   }, {
      "quote" : "Copy and paste<br />is a design error.",
      "author" : "- David Parnas"
   }, {
      "quote" : "If you make everything bold,<br />nothing is bold.",
      "author" : "- Art Webb"
   }, {
      "quote" : "Technical skill is mastery of complexity, while creativity is mastery of simplicity.",
      "author" : "- Christopher Zeeman"
   }, {
      "quote" : "First, solve the problem. Then, write the code.",
      "author" : "- John Johnson"
   }
];
 
// The quote index to start with
var currentQuoteIndex = 4;

As you can see, all these values can be changes easily. We can also add quotes to the quotes variable. The currentQuoteIndex is set to 4, but that could be any value (less than the length of the quotes object).

Now, when the document is ready, we need to start the animation. I've placed this in a seperate method call, since we'll need to re-use it later.

 
// Document ready
$(document).ready(function()
{   
   startAnimation();
});
 
/* Starts the animation */
var startAnimation = function() {
   setTimeout(function() {
      showLeftQuote();
   }, quoteSpeed);   
}

We're going to chain function calls in order to make the script work. As you can see, we call the showLeftQuote function after the configured time. By chaning functions after a set time, we can execute the function at the right moment..

 
/* Shows left quote */
var showLeftQuote = function() {
   $(".leftquote").show();
   
   setTimeout(function() {
      showRightQuote();
   }, quoteSpeed);
};
 
/* Shows right quote */
var showRightQuote = function() {
   $(".rightquote").show();
   
   setTimeout(function() {
      showQuoteContainer();
   }, quoteSpeed);
};

Now we have the left, and the right quotation marks showing. Now to expand the quote box.

 
/* Shows the quote container */
var showQuoteContainer = function() {
   $("<p />")
      .html(quotes[currentQuoteIndex].quote)
      .css({ "display" : "none"})
      .appendTo($(".quote"));
      
   $("<p />")
      .addClass("author")
      .html(quotes[currentQuoteIndex].author)
      .css({ "display" : "none"})
      .appendTo($(".quote"));
 
   $(".quote")
      .show()
      .animate({ width : quoteBoxWidth }, quoteContainerSpeed, function() {
         showQuote();
      });
}

We also inject the quote container with the current quote index text (the same with the author). We than expand the width of the quote box, and when the animation is done, we show the quote.

 
/* Shows the current quote */
var showQuote = function() {
   $(".quote").children().fadeIn();
      
   setTimeout(function() {
      clearQuote();
   }, showQuoteSpeed);
}

Just a simple Fade In, and both the quote and the author are being displayed! The last step of this loop is to clear the current quote, and start all over again.

 
/* Clear the current quote */
var clearQuote = function() {
   // Determine the curren quote index
   if(currentQuoteIndex == quotes.length - 1) {
      currentQuoteIndex = 0;
   }
   else {
      currentQuoteIndex++;
   }
   
   // Fade out the quotation marks
   $(".quotemark").fadeOut();
 
      $(".quote")
         .empty()
         .css({ width : "0px" });
      
      setTimeout(function() {
         startAnimation();
      }, cleanScreenSpeed);
   });
}

Since we set the correct currentQuoteIndex, this whole loop can start all over again with the next quote etc. It's pretty simple when you think about it!

Conclusion and Download

There we have it, a pretty cool way of displaying your quotes. As you can see in the comments, it would be great (in the future) to automatically resize to the width the text needs. Also, it might need more testing in other browsers, since fonts are always different rendered there.

What do you think? Would you like to see some changes to the effect? Or what kind of jQuery coding would you use (for example, use less setTimout)? Feel free to share!

Interested in this topic? You might enjoy another article I've written called

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to:

Comments

Add New

RSS

Lam Nguyen - Very nice effect

2010-12-15 05:17:13

Great effect. It will be useful when I need to create a random quote with nice animation. Thanks, Marco!

Reply | Quote

Philippines Virtual Assistant - Nice One

2010-12-15 18:09:44

This is one great jQuery script for smooth display of quotes .. Great job -- Kathleen

Reply | Quote

Raul - nice!

2010-12-16 14:25:06

nice article! i like the way you explained the idea, with the whiteboard

Reply | Quote

Maarten - Very good Tutorial

2010-12-17 14:27:03

Thanks for the Tutorial.
I'm working on it now. Some ideas:

1) Why not start at random?
[b]var currentQuoteIndex = Math.floor(Math.random()*12);
[/b]
(where 12 is the number of quotes + 1)

2) If you like to let the quotbox grow? I used this:
height:auto;

much thanks for sharing!

Reply | Quote

Marco - Thanks!

2010-12-18 07:19:57

Thanks Maarten!

For the first solution, I would use quotes.length instead of 12; more flexible when you'll be adding more quotes

.

Great for improving the code!

Reply | Quote

Malcolm Gibb - Web Designer Dundee

2010-12-22 12:10:08

Looking good! Just given me an idea for one of my websites. Keep upthe good posts!

Reply | Quote

Jaseem - Great Effect !

2010-12-26 08:24:15

Hey Marco,

Very nice effect indeed. Please do modify the code to add height:auto; and any number of quotes.

Reply | Quote

e11world

2011-02-09 09:31:39

See now this is something worth tweeting!! I like the effect and works pretty smooth on firefox and chrome! Nice job!

Reply | Quote

Chirag - Align in Center

2011-10-01 06:23:04

Could the code be modified so that the quotes start from the center and as they expand they extend to both sides. It will give a symmetrical effect.

Reply | Quote

Jeremy Chin

2011-10-24 12:42:32

Great work. What I would have liked is if the transition speed changed based on the length of the quote. Basically, I have some quotes that are short and can be read quickly, and some that are really long that require more time.

I'm not a great programmer and don't know how to do that myself.

Reply | Quote