Scrolling Images

Right to Left (RTL)

This section contains an image that scrolls horizontally (right to left, left to right, or a combination). The horizontal scroll is acheived using the direction attribute, which moves the image from right to left or left to right as required.

Slide-In Images

This image slides in from the right then stops. You will need to refresh this page to see the effect again.

Example:

Code:
<!-- HTML codes by Quackit.com --><br /> <marquee behavior="slide" direction="left"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /></marquee><br />

Continuous Image Scroll (RTL)

To make the image scroll continuously, we simply change the value of the behavior attribute to scroll (i.e. behavior="scroll").

Example:

Code:
<!-- HTML codes by Quackit.com --><br /> <marquee behavior="scroll" direction="left"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /></marquee><br />

Faster Scrolling

This example uses scrollamount="30" to increase the scroll speed.

Faster scrolling works better on continuous scrolling as opposed to slide-in images. This is because slide-in images stop after sliding in. If it slides in too fast, many users might miss the slide-in effect altogether.

Example:

Code:
<!-- HTML codes by Quackit.com --><br /> <marquee behavior="scroll" direction="left" scrollamount="30"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /></marquee><br />

Left to Right (LTR)

Slide-In Image

This image slides in from the left, then stays where it is. You will need to refresh this page to see the effect again.
Example:

Code:
<!-- HTML codes by Quackit.com --><br /> <marquee behavior="slide" direction="right"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bee.gif" width="72" height="79" alt="Flying Bee" /></marquee><br />

Continuous Image Scroll (LTR)

Again, we change the behavior attribute to scroll in order to make the image scroll continuously.
Example:

Code:

<!-- HTML codes by Quackit.com --><br /> <marquee behavior="scroll" direction="right"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bee.gif" width="72" height="79" alt="Flying Bee" /></marquee><br />

Faster Scrolling

This example uses scrollamount="30" to increase the scroll speed.
Example:

Code:

<!-- HTML codes by Quackit.com --><br /> <marquee behavior="scroll" direction="right" scrollamount="30"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bee.gif" width="72" height="79" alt="Flying Bee" /></marquee><br />

Image bouncing back and forth:

Normal Speed

This image bounces at the default speed.
Example:

Code:

<!-- HTML codes by Quackit.com --><br /> <marquee behavior="alternate"><img src="http://www.quackit.com/pix/tennis_ball.png" width="33" height="34" alt="Bouncing ball" /></marquee><br />

Faster Bounce

This example uses scrollamount="30" to speed up the scrolling/bouncing image.
Example:

Code:
<!-- HTML codes by Quackit.com --><br /> <marquee behavior="alternate" scrollamount="30"><img src="http://www.quackit.com/pix/tennis_ball.png" width="33" height="34" alt="Bouncing ball" /></marquee><br />

Image Scrolling Up:

This image has a vertical scroll - it starts at the bottom and moves up. As with some of the previous examples, you can adjust the scroll speed by using the scrollamount attribute. You could also create a vertical slide by using behavior="slide".
Example:

Code:
<!-- HTML codes by Quackit.com --><br /> <marquee behavior="scroll" direction="up"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bee.gif" width="72" height="79" alt="Flying Bee" /></marquee><br />

Images Scrolling Down:

This image also has a vertical scroll, but this time it starts at the top and moves down.
Example:

Code:
<!-- HTML codes by Quackit.com --><br /> <marquee behavior="scroll" direction="down"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bee.gif" width="72" height="79" alt="Flying Bee" /></marquee><br />

Various Scrolling Speeds:

This example demonstrates 3 different scrolling speeds.
Example:

Code:
<!-- HTML codes by Quackit.com --><br /> <marquee behavior="scroll" direction="right" scrollamount="10"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bee.gif" width="72" height="79" alt="Flying Bee" /></marquee><br /> <marquee behavior="scroll" direction="left" scrollamount="1"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/big_fish_swimming_md_wht.gif" width="94" height="88" alt="Fish swimming from right to left" /></marquee><br /> <marquee behavior="scroll" direction="left" scrollamount="30"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Bat flying really fast" /></marquee><br />

Jumping Images

The following example uses the scrolldelay attribute to slow the scrolling image down and make it look like it's jumping across the screen. Actually, the example also uses the scrollamount attribute to increase the size of each jump.

Example:

Code:
<!-- HTML codes by Quackit.com --><br /> <marquee behavior="scroll" direction="left" scrolldelay="800" scrollamount="100"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/71.gif" width="150" height="108" alt="Cup of tea anyone?" /></marquee><br /> </p><br />

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 images. 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

Falling Images

You can get some cool effects from your scrolling images. Check out this falling image (generated with the Falling Object Generator).