Scrolling text was introduced in early versions of Internet Explorer by means of the marquee tag. Since then the marquee tag has been incorporated into almost every browser, but its use is widely discouraged. Since the human eye is drawn towards movement, many people feel that text animation is distracting and draws your visitor way from the page’s main content. Personally, I do not entirely understand this sentiment since animation is very much a part of the web (YouTube services 100 million hits per day). I can only caution you to use scrolling text wisely and not let it dominate your page.

SiteSpinner does not have direct support for the marquee tag. You will need to use a code object and manually code the marquee tag contents. For example, the following HTML code used in a code object and placed in the page body:

<marquee width="200" scrollamount=5>Visit LowTechGeezer's SiteSpinner Pages</marquee>

would produce:

There are several attributes that can be used to control the marquee’s display, such as background color, width, direction, scroll amount, and looping. More details about these attributes can be found here. The marquee tag also has the ability to scroll more than text; it can handle any element placed inside its tag, such as images and movie clips.

The marquee tag does have one drawback. You may have noticed that the text animation is not a continuous flow; i.e., the text must completely scroll off the page before it restarts. This blank space is what I find most distracting. A better text scroller can be constructed using the jQuery SmoothDivScroll routine by Thomas Kahn. This is the same routine used in the Simple Image Scroller but adapted to use SiteSpinner text objects.

SiteSpinner Text Objects

Since the SmoothDivScroll routine can only scroll objects left and right, you should limit your text to a single line. While an entire paragraph of text can be scrolled, it would be very hard for your visitor to read. Style your text as you would want it to be viewed using the desired font family and size. You should also add font styling such as color, bold or italics as desired. Once you have placed the text object on your page, open the Object Editor to the Transformations tab and check the “No CSS Positioning” option. This is very important as the SiteSpinner positioning code would interfere with the animation.

Next, make a duplicate of the text object and then select both objects to place them into a temporary group. Align their centers both horizontally and vertically so they completely overlay each other. Turn this temporary group into a permanent group and take note of the group name (you’ll need it later for the code). Finally, position the group on the page where you want the animation to appear. You can also adjust the width of the group to set the amount of scrolling text that will be seen at any given time.

The Code

Visit the SmoothDivScroll home page to download the latest version of the routine. From the downloaded zip package, you will need to extract the jquery.smoothDivScroll-1.1.min.js file (or current version) and upload it to your site and copy it into your preview folder. The SmoothDivScroll routine is dependent upon the jQuery UI widget library, which you can download from here. The jquery-ui-widget.min.js file will also need to be uploaded to your site and copied into your preview folder.

When you have placed these 2 files on your site and copied them into your preview folder, you will need to include then on your work page. Open a code object, set the code placement to “Header” and enter:

<script type='text/javascript' 
src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript' src='jquery-ui-widget.min.js'></script>
<script type='text/javascript' src='jquery.smoothdivscroll.min.js'></script>
<script type='text/javascript'>
//-- USER PARANMETERS --
var scrollObj = 'objXX';
var scrollstep = 1;
var scrollinterval = 10;
//-- DO NOT MODIFY BELOW THIS LINE --
jQuery(document).ready(function($) {
  scrollObj = '#O'+scrollObj;
  src = $(scrollObj).html();
  $(scrollObj).html('<div class="scrollWrapper"><div class="scrollableArea">' +
                    src+'</div></div>');
  $(scrollObj).smoothDivScroll(
    { autoScroll: "always", autoScrollDirection: "endlessloopright",
      autoScrollStep: scrollstep, autoScrollInterval: scrollinterval
    });
});
</script>

In this code there is a section labeled User Parameters and in this section, there is a line that states:

var scrollObj = 'objXX';

You need to replace the objXX entry with the object name of your text group as noted above. Remember to enclose the name in quotes. This section also contains two additional parameters:

The values in the code are set to shift the text 1 pixel every 10 milliseconds. You may need to adjust these values to get the animation effect you desire.

The CSS

The final piece to get all this working is the CSS. Open a new code object, set the code placement to “in CSS” and enter:

#OobjXX div.scrollableArea * {
  display: block;
  float: left;
  margin: 0;
  padding-right: 20px;
  white-space: nowrap;
}
div.scrollWrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
div.scrollableArea {
  position: relative;
  width: auto;
  height: 100%;
}

In the CSS code, you need to change the objXX to the object name of your text group.

The only other change to the CSS code is optional and involves the line

padding-right: 20px;

This line sets a 20 pixel gap between the end of the first text object and the beginning of the 2nd. If you feel this gap is too small or too large, you can modify the pixel value to suit your needs.