The scrolling images on this page have all been created using the
marquee tag. The purpose of this page is to provide more scrolling image examples than that are on the other marquee related pages. Whereas some of those use scrolling text etc, this page concentrates solely on scrolling images.
This image slides in from the right, then stays there. This is done using
behavior="slide" in the marquee code.
If you don't see the image sliding in here, refresh the page - the picture probably slid in before you noticed it. Otherwise, your browser may have an issue in displaying the scrolling images/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
Continuous Scrolling Image
When many people think of scrolling images, they think of scrolling images like the ones below. These images scroll continuously - each time they reaches the end, they start all over again.
Scrolling Image - Right to Left
This HTML marquee image is scrolling from right to left. Although this tends to be the default, you can specify
direction="left" in the HTML code.
Scrolling Image - Left to Right
Here, the picture scrolls left to right because we add
direction="right" to the code.
Scrolling Image - Up
Here, the image scrolls upward. This is acheived by using both
Scrolling Image - Down
Here, the picture scrolls downward. This is acheived by using both
Nudging Image - Left to Right
Here, the scroller makes the image nudge itself across the screen. This is done by adding
Jumping Images - Left to Right
Here, the scroller makes the picture jump across the screen. Same as the above example, but this time we add
scrollamount="10" to speed the picture up.
Here, the graphic bounces back and forth. We do this by using
behavior="alternate" (as opposed to
Let's speed the scroller up using the
scrollamount attribute. Heck, while we're at it, let's replace the pic!
Scrolling Picture Speed
As seen above, you can speed up or slow down your scrolling image by using the
scrollamount attribute along with a numeric value. Here, we use several values to set different marquees speed.
Picture Scrolling Diagonally
In this example, we nest one
marquee inside of another. The outside marquee scrolls the image to the right. The inside marquee scrolls it upward.
Static Image Next to Marquee Image
You can use scrolling images for some great effects. Check out this falling picture marquee (based on code generated with the Falling Object Generator by Quackit).
<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:
|Sets the width of the marquee||How far to jump as it moves|
|Sets the height of the marquee||How many times it should loop|
|Sets the direction of the marquee||Sets the background color of the marquee|
|Whether to slide, bounce, or scroll||Sets the amount of horizontal space around the marquee|
|How long the marquee should wait before each jump||Sets the amount of vertical space around the marquee|