HTML Slide-In Image

This page contains code for creating slide-in images using the <marquee> tag. The <marquee> tag is not standards-compliant (i.e. it's not officially part of HTML). See CSS Slide-In Image for a standards-compliant version.

The HTML <marquee> tag allows you to create a slide-in image - or zoom in image. You can make your image slide in from any direction - left, right, top, or bottom. Also, you can use any image - photos, animated gifs, icons, etc.

Note: Because slide-in images slide in and then stop, you may need to refresh this page a few times in order to view all examples on the page. This is because the images all start sliding as soon as the page loads.

Top to Bottom

To make your image slide in from the top, use behavior="slide" direction="down". In this example, I've stacked the same image on top of each other in order to highlight the effect of the slide-in image. Different browsers display slide-in images differently, and it would be easy to miss the effect with only a small image.

Source Code

Result

<marquee behavior="slide" direction="down"> <img src="//www.html.am/images/html-codes/marquees/arrow-down.gif" width="32" height="32" alt="Arrow pointing down" /><br /> <img src="//www.html.am/images/html-codes/marquees/arrow-down.gif" width="32" height="32" alt="Arrow pointing down" /><br /> <img src="//www.html.am/images/html-codes/marquees/arrow-down.gif" width="32" height="32" alt="Arrow pointing down" /><br /> <img src="//www.html.am/images/html-codes/marquees/arrow-down.gif" width="32" height="32" alt="Arrow pointing down" /><br /> <img src="//www.html.am/images/html-codes/marquees/arrow-down.gif" width="32" height="32" alt="Arrow pointing down" /><br /> </marquee>

Bottom to Top

To make your image slide in from the bottom, use behavior="slide" direction="up". Example:

Source Code

Result

<marquee behavior="slide" direction="up"> <img src="//www.html.am/images/html-codes/marquees/arrow-up.gif" width="32" height="32" alt="Arrow pointing up" /><br /> <img src="//www.html.am/images/html-codes/marquees/arrow-up.gif" width="32" height="32" alt="Arrow pointing up" /><br /> <img src="//www.html.am/images/html-codes/marquees/arrow-up.gif" width="32" height="32" alt="Arrow pointing up" /><br /> <img src="//www.html.am/images/html-codes/marquees/arrow-up.gif" width="32" height="32" alt="Arrow pointing up" /><br /> <img src="//www.html.am/images/html-codes/marquees/arrow-up.gif" width="32" height="32" alt="Arrow pointing up" /><br /> </marquee>

Right to Left

To make your image slide in from the right, use behavior="slide" direction="left". Like this:

Source Code	Result
<marquee behavior="slide" direction="left"> <img src="//www.html.am/images/html-codes/marquees/fish-swimming.gif" width="94" height="88" alt="Swimming fish" /> </marquee>

Left to Right

To make your image slide in from the left, use behavior="slide" direction="right". Like this:

Source Code

Result

<marquee behavior="slide" direction="right"> <img src="//www.html.am/images/html-codes/marquees/spinning-arrow-right.gif" width="50" height="38" alt="Spinning arrow" /> <img src="//www.html.am/images/html-codes/marquees/spinning-arrow-right.gif" width="50" height="38" alt="Spinning arrow" /> <img src="//www.html.am/images/html-codes/marquees/spinning-arrow-right.gif" width="50" height="38" alt="Spinning arrow" /> <img src="//www.html.am/images/html-codes/marquees/spinning-arrow-right.gif" width="50" height="38" alt="Spinning arrow" /> <img src="//www.html.am/images/html-codes/marquees/spinning-arrow-right.gif" width="50" height="38" alt="Spinning arrow" /> </marquee>

Changing the Speed

You can speed up your slide-in image - or slow it down if you prefer. To do this, just add the scrollamount attribute. For example, scrollamount="1" results in a very slow slide, while scrollamount="50" will make the image zoom-in - perhaps too fast for most people to notice it zooming in.

Some examples:

Source Code

Result

<marquee behavior="slide" direction="left" scrollamount="1"><img src="//www.html.am/images/html-codes/marquees/fish-swimming.gif" width="94" height="88" alt="Swimming fish" /></marquee> <marquee behavior="slide" direction="left" scrollamount="2"><img src="//www.html.am/images/html-codes/marquees/fish-swimming.gif" width="94" height="88" alt="Swimming fish" /></marquee> <marquee behavior="slide" direction="left" scrollamount="3"><img src="//www.html.am/images/html-codes/marquees/fish-swimming.gif" width="94" height="88" alt="Swimming fish" /></marquee> <marquee behavior="slide" direction="left" scrollamount="4"><img src="//www.html.am/images/html-codes/marquees/fish-swimming.gif" width="94" height="88" alt="Swimming fish" /></marquee> <marquee behavior="slide" direction="left" scrollamount="5"><img src="//www.html.am/images/html-codes/marquees/fish-swimming.gif" width="94" height="88" alt="Swimming fish" /></marquee>

More Marquee Codes

You can do much more with HTML marquees than is covered on this page. Here's the full list of marquee codes on this website:

• HTML Marquee
• CSS Marquee
• Scrolling Text
• Slide-In Text
• Bouncing Text
• Scrolling Image
• Slide-In Image
• Bouncing Image

Marquee Generator

Also check out the Marquee Generator.

Marquee Usability

Try to be careful when using HTML marquees. Many web users dislike websites that contain scrolling or bouncing images and other elements, so try to use them tastefully :)