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 CodeResult
Flying bat in a marquee

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 CodeResult
Flying bat in a marquee

Scrolling Image - Left to Right

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

Source CodeResult
Flying bee in a marquee

Scrolling Image - Up

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

Source CodeResult
Flying bee in a marquee

Scrolling Image - Down

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

Source CodeResult
Flying bee in a marquee

Nudging Image - Left to Right

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

Source CodeResult
Flying bee in a marquee

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 CodeResult
Flying bee in a marquee

Bouncing Images

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

Source CodeResult
Flying bat in a marquee

Faster Bounce

Let's speed the scroller up using the scrollamount attribute. Heck, while we're at it, let's replace the pic!

Source CodeResult
Flying bee in a marquee

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 CodeResult
Flying bat in a marquee Flying bat in a marquee Flying bat in a marquee Flying bat in a marquee Flying bat in a marquee

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 CodeResult
Flying bee in a marquee

Static Image Next to Marquee Image

Source CodeResult
Flying bee in a marquee Flying bee in a marquee

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 CodeResult
Flying bee image in a scrolling marqueeFlying bee image in a scrolling marqueeFlying bee image in a scrolling marqueeFlying bee image in a scrolling marqueeFlying bee image in a scrolling marqueeFlying bee image in a scrolling marqueeFlying bee image in a scrolling marqueeFlying bee image in a scrolling marqueeFlying bee image in a scrolling marqueeFlying bee image in a scrolling marqueeFlying bee image in a scrolling marqueeFlying bee image in a scrolling marqueeFlying bee image in a scrolling marqueeFlying bee image in a scrolling marqueeFlying bee image in a scrolling marqueeFlying bee image in a scrolling marqueeFlying bee image in a scrolling marqueeFlying bee image in a scrolling marqueeFlying bee image in a scrolling marqueeFlying bee image in a scrolling marqueeFlying bee image in a scrolling marquee

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:

widthSets the width of the marqueescrollamountHow far to jump as it moves
heightSets the height of the marqueeloopHow many times it should loop
directionSets the direction of the marqueebgcolorSets the background color of the marquee
behaviorWhether to slide, bounce, or scrollhspaceSets the amount of horizontal space around the marquee
scrolldelayHow long the marquee should wait before each jumpvspaceSets the amount of vertical space around the marquee

About the HTML Codes

The HTML code on this page is provided free of charge, for you to use however you wish. Feel free to modify the code to suit your own needs.

External Style Sheets

Most of the HTML codes on this website use inline CSS. If you intend to use the codes across your whole website, you should place the CSS into an external style sheet.

To learn more, check out this explanation of external style sheets.

Web Hosting

Our partner site, ZappyHost, is a professional web hosting company providing website hosting, domain names and related products. If you need web hosting, check them out!