Yesterday, I wanted to add a simple effect to the Dragon Run web site: fading in and out quotes about the book from readers.

Typically, my answer to this problem would be jQuery, but the rest of the site doesn’t use jQuery, and I couldn’t justify pulling in all that overhead for one animation, so I decided to code my own.

I started with the effect I wanted – the fading. That’s simple CSS: one class to fade in, and one to fade out. If you don’t know CSS, don’t worry. You can just use these as is.

.fadein {
  opacity: 1;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}
.fadeout {
  opacity: 0;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

Briefly, the first line of each of these CSS classes gives the opacity of the element after the transitions have completed. The next three lines tell the browser how to get to that opacity.

Next, I needed the javascript to add/remove the transitions appropriately. At first, I was a bit stumped by this. I know how to add and remove classes, but how could I add and remove these in a way that achieved the desired effect?

Javascript’s setInterval() was the obvious place to start. It causes a javascript function to be called every so many milliseconds.I had the fades taking 250 milliseconds, so it made sense to set the interval to happen every 250 milliseconds.

Once I figured that out, everything else just flowed. I built a javascript object with an internal counter. I use setInterval to call its show function every 250 milliseconds, and inside that function, I set a counter to indicate whether the text should change to a new quote and fade in, or just stay visible, or fade out.

Before I go any farther, here’s the code for the object:

var quoterotator= {
  quotation: ["quote 1","quote 2", "add as many quotes as you like"],
  milliseconds:250,         // should match the fade time
  iterationstoshowtext: 15, // 15 * 250 milliseconds = 3.75 seconds
  action:0,                 // the key to the whole thing
  id:-1,                    // the index of the last quotation shown
  divtofillwithquotes: "quotediv", // the name of the div to fill with quotes
  start: function (divtofill) {
    this.divtofillwithquotes=divtofill;
    setInterval("quoterotator.shownext()",this.milliseconds);
  },
  shownext: function () {
   var thediv=document.getElementById(this.divtofillwithquotes);
   var which =0;
   if (thediv) {
    if (this.action==0) { // fadein and changetext;
     do { which=Math.round(Math.random()*(this.quotation.length - 1)); }
     while (which==this.id);
     this.id=which;
     thediv.innerHTML="“"+this.quotation[this.id]+"...”";
     thediv.className = "fadein";
     this.action++;
    } else if (this.action==this.iterationstoshowtext) {
      thediv.className = "fadeout";
      this.action=0;
    } else { this.action++; }
   }
  }
}

I’ll start with a breakdown of the object fields.

• quotation: this is where you put all the quotes, just add your quotes in quotes between commas. What you’re doing is filling a javascript literal array.
• milliseconds should match the timing of the effects in the .fadein and .fadeout classes.
• iterationstoshowtext indicates how many iterations (multiples of the milliseconds field) to show each quote for.
• action is the internal counter that tells the object what to do next.
• id is the id of the quote currently being shown. I just use this to prevent the same quote from being shown twice in a row.
• divtofillwithquotes is the name of the div (or span or paragraph) to fill with quotes
• start() is the method that’s used to start the quotes rotating. Pass in the name of the div to fill.
• shownext() shows the next quote, but how it does it 

<div id="drquotes"></div>
<script> quoterotator.start("drquotes");</script>

To see all this in action, check out the home page of the Dragon Run web site. The quote rotator is on the top of the right column.

There are lots of different things you could do with this simple little javascript object, especially given all the different animation options available in css (check out animate.css to see what I mean).

Enjoy!

Want to comment? Hit me up on Threads or Facebook!