Create a Typing Text Effect using jQuery

Wednesday, August 26th, 2009

For long now flash has been dominating the interactive web animation, using JavaScript was a daunting task. But introduction of frameworks like jQuery, MooTools, Scriptaculous, etc have made animating web component much easier. Another advantage of using these frameworks over flash is that they are search engine friendly. Though search engine do not index JavaScript, actual content is present in html or other SEO friendly code.

You must have seen this text effect on many flash websites. jTicker is a jQuery plugin that can be used for creating such effect without the use of flash. This effect comes in handy when you want to force the visitor to read the text. But should be used wherever necessary, as the usability suffers. jTicker can be declared on any element and can be stylized using CSS. You can also use event buttons to play, stop and control the speed of the effect.

HTML

Let us start with html markup. Make sure that you have linked the .js files correctly.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jticker | Demo</title>
<script type="text/javascript" SRC="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" SRC="js/jquery.jticker.js"></script>
</head>
<body>
<div id="content">
  <h2>jTicker Demo  </h2>
  <div id="ticker">
    <div>
      <h3>What does jTicker do?</h3>
        <p>jTicker takes an elements' children and displays them one by one, in sequence, writing their text 'ticker tape' style. It is smart enough to ticker text from an element heirarchy, inserting elements back into the DOM tree as it needs them. That means almost any content can be 'tickered'.</p>
        <p>It can be controlled with jQuery events.</p>
        <a class="next" href="#">next</a>
    </div>
    <div>
      <h3>Not my cup of tea, really, ...</h3>
        <p>annoying little blinky things trying to distract attention when you want to get on with the serious business of reading a website, but if it's your thing, here it is.</p>

        <a class="next" href="#">next</a>
    </div>
    <div>
        <h3>jTicker has some neat features:</h3>
        <ul>
        	<li>jTicker can be declared on any element, and it respects that element's DOM tree, printing it back out with the same hierarchy.</li>
            <li>jTicker handles any number of alternating cursors (or just one).</li>

            <li>jTicker's cursor container is styleable using the class .cursor, or can be defined as your own jQuery object</li>
            <li>jTicker reacts to jQuery events "play", "stop" and "control". You can try them out below.</li>
        </ul>
        <a class="next" href="#">next</a>
    </div>

    <div>
        <h3>There is one caveat:</h3>

        <ul>
            <li><span>jTicker can't understand text and children at the same level (I don't know how to do that yet), so if you want some text and then a link, you have to wrap the text in, say, a span, like this:</span>
                <code>|span| some text |/span| |a|and then a link|/a|</code>
            </li>
            <li>But obviously not with those brackets. That's another thing, jTicker is not good at handling html character entities. So make that two caveats.</li>
        </ul>
        <a class="next" href="#">next</a>
    </div>
  </div>
</div>
</body>
</html>

CSS

Add this code to your CSS file or to the <style>

  #ticker
    {height: 12em; padding: 0.6em 0; margin: 0 0 1.8em 0; border-top:3px solid #efefef; border-bottom:3px solid #efefef; position: relative;}
  #ticker .cursor
    {display: inline-block; background: #565c61; width: 0.6em; height: 1em; text-align: center;}
  #ticker p
    {margin-bottom: 0.8em;}
  #ticker code
    {margin: 0.4em 0.4em; display: block;}
  #ticker .next
    {position: absolute; bottom: 1em;}

JavaScript

Now initialize jTicker by adding this JavaScript to <head> between <script type=”text/javascript”></script>

<!--
  jQuery(document).ready(function(){
    // Instantiate jTicker
	jQuery("#ticker").ticker({
 		cursorList:  " ",
 		rate:        10,
 		delay:       4000
	}).trigger("play").trigger("stop");

    // Trigger events
    jQuery(".stop").click(function(){
        jQuery("#ticker").trigger("stop");
        return false;
    });

    jQuery(".play").click(function(){
        jQuery("#ticker").trigger("play");
        return false;
    });

    jQuery(".speedup").click(function(){
        jQuery("#ticker")
        .trigger({
            type: "control",
            item: 0,
            rate: 10,
            delay: 4000
        })
        return false;
    });

    jQuery(".slowdown").click(function(){
        jQuery("#ticker")
        .trigger({
            type: "control",
            item: 0,
            rate: 90,
            delay: 8000
        })
        return false;
    });

    jQuery(".next").live("click", function(){
        jQuery("#ticker")
        .trigger({type: "play"})
        .trigger({type: "stop"});
        return false;
    });

    jQuery(".style").click(function(){
        jQuery("#ticker")
        .trigger({
            type: "control",
            cursor: jQuery("#ticker").data("ticker").cursor.css({width: "4em", background: "#efefef", position: "relative", top: "1em", left: "-1em"})
        })
        return false;
    });

  });

//-->

View Demo

Download Files

Visit Authors Website

Create a Typing Text Effect using jQuery

 

About Author

Vailancio Rodrigues runs Pixel Art . His interests are Fine Art, Web Technologies, Motion Graphics and Visual Effects. Loves messing around with his software packages in free time to come up with new ideas which he shares on Pixel Art .

 

Discussions