Macam - macam Teks Mengapung pada blog

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) Blank-ers

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 specifydirection="left" in the HTML code.

Source Code	Result
	Your left scrolling

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 addscrollamount="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 tobehavior="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 theFalling 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