Text effects in Web Studio
Web Studio 5 Tutorials and Add On's - supporting you take your website that next step

Horizontal text scroll

 Remember to donate if you use a tutorial - Thank-you for help with maintaining the website and for understanding my time

SEE THE CSS CATEGORY FOR TEXT BASICS

Two options for a horizontal text scroller
An old html marquee and a jQuery smoother text scroll

MARQUEE vs jQuery
Both use a web studio text object that you type your scroller into
The marquee is an old HTML tag that is easier to use but I find a little jagged
The jQuery requires a script to load and has a few steps to use it, so your choice.

The jQuery example

The marquee example

Smooth Scroll ++++ This is the example of a horizontal text scroll using Smooth Scroll +++++
Marquee HTML ++++ This is the example of a horizontal text scroll using the Marquee HTML +++++

The marquee

Put your text on the page like you always do and type in your scroller text.
Before you paste in the two marquee tags use web studio to select the color and size of your fonts
Don't center it, all we want is text. Aligning it adds a <P> tags - it'll still work but that adds a space.

We have to do it this way since web studio adds the style into font tags when you make changes
instead of into the paragraph or marquee like it should.

So all you want from above is those two marquee tags
The scroller will be the width you drag your text object
If you want to change a color or text size, remove the tags and paste them back in when done

<MARQUEE>
<FONT style="FONT-SIZE: 14pt" color=#c80f12>
This is the text you typed in we add the two marquee tags top and bottom
</FONT>
</MARQUEE>

Select your text and on the TEXT tab
in "Clipboard" select "edit HTML" and 
copy/paste the two marquee tags
above and below your text

The jQuery smooth scroller

Put your text on the page like you always do and type in your message
You can use web studio for the font color, text size like usual
but don't center align the text we don't want the <P> tag added by web studio

class=scroll

Click on the text object 
go to the
HTML tab and in Insert Object HTML
copy/paste this in
Inside DIV

Add a class to the text object

Add a style to the HEAD

<style type="text/css">
div.scroll {white-space:no-wrap;overflow:hidden;}
div.scroll > div.text {white-space:nowrap;display:inline;width:auto;}
</style>

In Insert Page HTML Copy/Paste this code in the HEAD

Place the code to make it work on your page

Press "OK"
to save

DOUBLE CLICK
on the HTML Object
and paste the code below

That puts the HTML
container on the page

On the Html tab
in Add HTML
select
HTML Object

Copy / Paste this in the HTML Object:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script language="javascript" type="text/javascript">
$(function() {
$("div.scroll div").addClass("text");
var scroll = $('div.scroll');
scroll.each(function() {
var mar = $(this),indent = mar.width();
mar.scroll = function() {
indent--;
mar.css('text-indent',indent);
if (indent < -1 * mar.children('div.text').width()) {
indent = mar.width();
}
};
mar.data('interval',setInterval(mar.scroll,1000/60));
});
});
</script>

Thank-you

Text effects in Web Studio 5 - Horizontal text scroll - by Web Studio Next

aaaaaaaaaaaaiii