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
<!-- Codes by HTMLcodes.me --> <marquee behavior="slide" direction="left"><img src="http://www.htmlcodes.me/images/marquees/ducky.gif" width="156" height="171" alt="Flying bat in a marquee" /></marquee> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/marquees/scrolling-images.cfm">HTML scrolling images</a></p>

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
<!-- Codes by HTMLcodes.me --> <marquee behavior="scroll" direction="left"><img src="http://www.htmlcodes.me/images/marquees/flying_bat.gif" width="125" height="82" alt="Flying bat in a marquee" /></marquee> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/marquees/scrolling-images.cfm">HTML scrolling images</a></p>

Scrolling Image - Left to Right

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

Source Code	Result
<!-- Codes by HTMLcodes.me --> <marquee behavior="scroll" direction="right"><img src="http://www.htmlcodes.me/images/marquees/bee.gif" width="72" height="79" alt="Flying bee in a marquee" /></marquee> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/marquees/scrolling-images.cfm">HTML scrolling images</a></p>

Scrolling Image - Up

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

Source Code	Result
<!-- Codes by HTMLcodes.me --> <marquee behavior="scroll" direction="up"><img src="http://www.htmlcodes.me/images/marquees/bee.gif" width="72" height="79" alt="Flying bee in a marquee" /></marquee> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/marquees/scrolling-images.cfm">HTML scrolling images</a></p>

Scrolling Image - Down

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

Source Code	Result
<!-- Codes by HTMLcodes.me --> <marquee behavior="scroll" direction="down"><img src="http://www.htmlcodes.me/images/marquees/bee.gif" width="72" height="79" alt="Flying bee in a marquee" /></marquee> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/marquees/scrolling-images.cfm">HTML scrolling images</a></p>

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
<!-- Codes by HTMLcodes.me --> <marquee behavior="scroll" direction="right" scrolldelay="400"><img src="http://www.htmlcodes.me/images/marquees/bee.gif" width="72" height="79" alt="Flying bee in a marquee" /></marquee> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/marquees/scrolling-images.cfm">HTML scrolling images</a></p>

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
<!-- Codes by HTMLcodes.me --> <marquee behavior="scroll" direction="right" scrolldelay="600" scrollamount="100"><img src="http://www.htmlcodes.me/images/marquees/bee.gif" width="72" height="79" alt="Flying bee in a marquee" /></marquee> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/marquees/scrolling-images.cfm">HTML scrolling images</a></p>

Bouncing Images

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

Source Code	Result
<!-- Codes by HTMLcodes.me --> <marquee behavior="alternate" direction="left"><img src="http://www.htmlcodes.me/images/marquees/flying_bat.gif" width="125" height="82" alt="Flying bat in a marquee" /></marquee> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/marquees/scrolling-images.cfm">HTML scrolling images</a></p>

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
<!-- Codes by HTMLcodes.me --> <marquee behavior="alternate" direction="left" scrollamount="100"><img src="http://www.htmlcodes.me/images/marquees/bee.gif" width="72" height="79" alt="Flying bee in a marquee" /></marquee> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/marquees/scrolling-images.cfm">HTML scrolling images</a></p>

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

<!-- Codes by HTMLcodes.me --> <marquee behavior="scroll" direction="left" scrollamount="10"><img src="http://www.htmlcodes.me/images/marquees/flying_bat.gif" width="125" height="82" alt="Flying bat in a marquee" /></marquee> <marquee behavior="scroll" direction="left" scrollamount="5"><img src="http://www.htmlcodes.me/images/marquees/flying_bat.gif" width="125" height="82" alt="Flying bat in a marquee" /></marquee> <marquee behavior="scroll" direction="left" scrollamount="1"><img src="http://www.htmlcodes.me/images/marquees/flying_bat.gif" width="125" height="82" alt="Flying bat in a marquee" /></marquee> <marquee behavior="scroll" direction="left" scrollamount="20"><img src="http://www.htmlcodes.me/images/marquees/flying_bat.gif" width="125" height="82" alt="Flying bat in a marquee" /></marquee> <marquee behavior="scroll" direction="left" scrollamount="100"><img src="http://www.htmlcodes.me/images/marquees/flying_bat.gif" width="125" height="82" alt="Flying bat in a marquee" /></marquee> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/marquees/scrolling-images.cfm">HTML scrolling images</a></p>

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
<!-- Codes by HTMLcodes.me --> <marquee behavior="scroll" direction="right"><marquee behavior="scroll" direction="up"><img src="http://www.htmlcodes.me/images/marquees/bee.gif" width="72" height="79" alt="Flying bee in a marquee" /></marquee></marquee> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/marquees/scrolling-images.cfm">HTML scrolling images</a></p>

Static Image Next to Marquee Image

Source Code

Result

<!-- Codes by HTMLcodes.me --> <img style="float:left;" src="http://www.htmlcodes.me/images/marquees/bee.gif" width="72" height="79" alt="Flying bee in a marquee" /> <marquee style="width:300px;" behavior="scroll" direction="right"><img src="http://www.htmlcodes.me/images/marquees/bee.gif" width="72" height="79" alt="Flying bee in a marquee" /></marquee> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/marquees/scrolling-images.cfm">HTML scrolling images</a></p>

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

<!-- Codes by HTMLcodes.me --> <div style="position:relative;height:600px;"> <marquee style="z-index:2;position:absolute;left:186px;top:84px;height:447px;"direction="down"><img src="http://www.htmlcodes.me/images/marquees/bee.gif" width="72" height="79" alt="Flying bee image in a scrolling marquee" /></marquee><marquee style="z-index:2;position:absolute;left:280px;top:14px;height:366px;"scrollamount="1" direction="down"><img src="http://www.htmlcodes.me/images/marquees/bee.gif" width="72" height="79" alt="Flying bee image in a scrolling marquee" /></marquee><marquee style="z-index:2;position:absolute;left:96px;top:52px;height:59px;"direction="down"><img src="http://www.htmlcodes.me/images/marquees/bee.gif" width="72" height="79" alt="Flying bee image in a scrolling marquee" /></marquee><marquee style="z-index:2;position:absolute;left:54px;top:72px;height:458px;"scrollamount="2" direction="down"><img src="http://www.htmlcodes.me/images/marquees/bee.gif" width="72" height="79" alt="Flying bee image in a scrolling marquee" /></marquee><marquee style="z-index:2;position:absolute;left:61px;top:40px;height:372px;"scrollamount="4" direction="down"><img src="http://www.htmlcodes.me/images/marquees/bee.gif" width="72" height="79" alt="Flying bee image in a scrolling marquee" /></marquee><marquee style="z-index:2;position:absolute;left:10px;top:62px;height:38px;"scrollamount="6" direction="down"><img src="http://www.htmlcodes.me/images/marquees/bee.gif" width="72" height="79" alt="Flying bee image in a scrolling marquee" /></marquee><marquee style="z-index:2;position:absolute;left:155px;top:82px;height:299px;"scrollamount="6" direction="down"><img src="http://www.htmlcodes.me/images/marquees/bee.gif" width="72" height="79" alt="Flying bee image in a scrolling marquee" /></marquee><marquee style="z-index:2;position:absolute;left:7px;top:18px;height:284px;"scrollamount="3" direction="down"><img src="http://www.htmlcodes.me/images/marquees/bee.gif" width="72" height="79" alt="Flying bee image in a scrolling marquee" /></marquee><marquee style="z-index:2;position:absolute;left:224px;top:23px;height:257px;"scrollamount="2" direction="down"><img src="http://www.htmlcodes.me/images/marquees/bee.gif" width="72" height="79" alt="Flying bee image in a scrolling marquee" /></marquee><marquee style="z-index:2;position:absolute;left:293px;top:9px;height:63px;"scrollamount="6" direction="down"><img src="http://www.htmlcodes.me/images/marquees/bee.gif" width="72" height="79" alt="Flying bee image in a scrolling marquee" /></marquee><marquee style="z-index:2;position:absolute;left:84px;top:110px;height:432px;"scrollamount="3" direction="down"><img src="http://www.htmlcodes.me/images/marquees/bee.gif" width="72" height="79" alt="Flying bee image in a scrolling marquee" /></marquee><marquee style="z-index:2;position:absolute;left:236px;top:71px;height:180px;"scrollamount="3" direction="down"><img src="http://www.htmlcodes.me/images/marquees/bee.gif" width="72" height="79" alt="Flying bee image in a scrolling marquee" /></marquee><marquee style="z-index:2;position:absolute;left:310px;top:37px;height:209px;"scrollamount="3" direction="down"><img src="http://www.htmlcodes.me/images/marquees/bee.gif" width="72" height="79" alt="Flying bee image in a scrolling marquee" /></marquee><marquee style="z-index:2;position:absolute;left:206px;top:92px;height:52px;"direction="down"><img src="http://www.htmlcodes.me/images/marquees/bee.gif" width="72" height="79" alt="Flying bee image in a scrolling marquee" /></marquee><marquee style="z-index:2;position:absolute;left:96px;top:7px;height:48px;"scrollamount="5" direction="down"><img src="http://www.htmlcodes.me/images/marquees/bee.gif" width="72" height="79" alt="Flying bee image in a scrolling marquee" /></marquee><marquee style="z-index:2;position:absolute;left:241px;top:13px;height:159px;"scrollamount="6" direction="down"><img src="http://www.htmlcodes.me/images/marquees/bee.gif" width="72" height="79" alt="Flying bee image in a scrolling marquee" /></marquee><marquee style="z-index:2;position:absolute;left:287px;top:83px;height:270px;"scrollamount="1" direction="down"><img src="http://www.htmlcodes.me/images/marquees/bee.gif" width="72" height="79" alt="Flying bee image in a scrolling marquee" /></marquee><marquee style="z-index:2;position:absolute;left:123px;top:75px;height:300px;"scrollamount="5" direction="down"><img src="http://www.htmlcodes.me/images/marquees/bee.gif" width="72" height="79" alt="Flying bee image in a scrolling marquee" /></marquee><marquee style="z-index:2;position:absolute;left:223px;top:14px;height:305px;"scrollamount="2" direction="down"><img src="http://www.htmlcodes.me/images/marquees/bee.gif" width="72" height="79" alt="Flying bee image in a scrolling marquee" /></marquee><marquee style="z-index:2;position:absolute;left:105px;top:113px;height:259px;"scrollamount="5" direction="down"><img src="http://www.htmlcodes.me/images/marquees/bee.gif" width="72" height="79" alt="Flying bee image in a scrolling marquee" /></marquee><marquee style="z-index:2;position:absolute;left:183px;top:64px;height:99px;"scrollamount="2" direction="down"><img src="http://www.htmlcodes.me/images/marquees/bee.gif" width="72" height="79" alt="Flying bee image in a scrolling marquee" /></marquee> </div> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/marquees/scrolling-images.cfm">HTML scrolling images</a></p>

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