sitemaxx.tr.gg
GOOGLE SİTE
  Scrolling Text
 

Scrolling Text

The scrolling text examples on this page have all been created using the marquee tag. The purpose of this page is to provide more scrolling text examples than that are on the other marquee related pages. Whereas some of those use scrolling images etc, this page concentrates solely on scrolling text.

Slide-in Text

I placed this example at the top for a reason. The text slides in, then stays there. Being near the top of the page, there is a better chance of the sliding text being seen. If I'd placed it further down the page, it's more likely to be missed (due to the user not seeing it until they scroll down - in which case the text would probably have finished sliding in!).

Therefore, if you don't see the text sliding in here, refresh the page - the text probably slid in before you noticed it. Otherwise, your browser may have an issue in displaying the scrolling text/marquee.

This example sets the text to slide in, and then stay there. It doesn't loop continuously. It simply slides in, then stops. This is acheived by using behavior="slide".

Source Code Result
Your marquee (slide-in) text goes here

Continuous Scrolling Text

Many websites tend to use continuous scrolling. That is, the text scrolls continuously - each time it reaches the end, it starts all over again.

Scrolling Text - Right to Left

This HTML marquee is scrolling from right to left. Although this tends to be the default, you can specify direction="left" in the HTML code.

Source Code Result
Your left scrolling text goes here

Scrolling Text - Left to Right

Here, the HTML marquee scrolls left to right because we add direction="right" to the code.

Source Code Result
Your right scrolling text goes here

Scrolling Text - Up

Here, the text scrolls upward. This is acheived by using both behavior="scroll" and direction="up".

Source Code Result
Your vertically scrolling text goes here

Scrolling Text - Down

Here, the text scrolls downward. This is acheived by using both behavior="scroll" and direction="down".

Source Code Result
Your vertically scrolling text goes here

Nudging Text - Left to Right

Here, the scroller makes the text nudge itself across the screen. This is done by adding scrolldelay="400".

Source Code Result
Your nudging text goes here

Jumping Text - Left to Right

Here, the scroller makes the text jump across the screen. Same as the above example, but this time we add scrollamount="10" to speed the text up.

Source Code Result
Your jumping text goes here

Bouncing Text

Here, the text bounces back and forth. We do this by using behavior="alternate" (as opposed to behavior="scroll").

Source Code Result
Your bouncing text goes here

Faster Bounce

Let's speed the scroller up using the scrollamount attribute.

Source Code Result
Your bouncing text goes here

Scrolling Text Speed

As seen above, you can speed up or slow down your scrolling text by using the scrollamount attribute along with a numeric value. Here, we use several values to set different marquees speed.

Source Code Result

Life in the fast lane...

BMWAudiMe on my bikeFerrariLamborghini

Text Scrolling Diagonally

In this example, we nest one marquee inside of another. The outside marquee scrolls the text to the right. The inside marquee scrolls it upward.

Source Code Result
Up up and away!

Falling Text

You can use scrolling text for some great effects. Check out this falling text (based on code generated with the Falling Text Generator by Quackit).

Source Code Result
Scrolling textFalling textScrolling textFalling textScrolling textFalling textScrolling textFalling textScrolling textFalling textScrolling textFalling textScrolling textFalling textScrolling textFalling textScrolling textFalling textScrolling textFalling textScrolling text

Marquee Attributes

The <marquee> tag accepts a number of attributes (some of which are included in the above examples). Feel free to experiment with these settings to see the effect they have on your scrolling text. The full list of attributes are:

width Sets the width of the marquee scrollamount How far to jump as it moves
height Sets the height of the marquee loop How many times it should loop
direction Sets the direction of the marquee bgcolor Sets the background color of the marquee
behavior Whether to slide, bounce, or scroll hspace Sets the amount of horizontal space around the marquee
scrolldelay How long the marquee should wait before each jump vspace Sets the amount of vertical space around the marquee
 
  
  sitemaxx.tr.gg  
 
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol