Scrolling Images
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.
Slide-in 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 behavior="slide"
.
Source Code | Result |
---|---|
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.
Source Code | Result |
---|---|
Scrolling Image - Left to Right
Here, the picture scrolls left to right because we add direction="right"
to the code.
Source Code | Result |
---|---|
Scrolling Image - Up
Here, the image scrolls upward. This is acheived by using both behavior="scroll"
and direction="up"
.
Source Code | Result |
---|---|
Scrolling Image - Down
Here, the picture scrolls downward. This is acheived by using both behavior="scroll"
and direction="down"
.
Source Code | Result |
---|---|
Nudging Image - Left to Right
Here, the scroller makes the image nudge itself across the screen. This is done by adding scrolldelay="400"
.
Source Code | Result |
---|---|
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.
Source Code | Result |
---|---|
Bouncing Images
Here, the graphic bounces back and forth. We do this by using behavior="alternate"
(as opposed to behavior="scroll"
).
Source Code | Result |
---|---|
Faster Bounce
Let's speed the scroller up using the scrollamount
attribute. Heck, while we're at it, let's replace the pic!
Source Code | Result |
---|---|
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.
Source Code | Result |
---|---|
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.
Source Code | Result |
---|---|
|
Static Image Next to Marquee Image
Source Code | Result |
---|---|
|
Falling Images
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).
Source Code | Result |
---|---|
|
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 |