Slide-In Image

This page contains HTML code for creating slide-in images.

You can create a slide-in image - or zoom in image - in HTML using <marquee> tags. 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 CodeResult
Arrow pointing down
Arrow pointing down
Arrow pointing down
Arrow pointing down
Arrow pointing down

Bottom to Top

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

Source CodeResult
Arrow pointing up
Arrow pointing up
Arrow pointing up
Arrow pointing up
Arrow pointing up

Right to Left

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

Source CodeResult
Swimming fish

Left to Right

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

Source CodeResult
Spinning arrow Spinning arrow Spinning arrow Spinning arrow Spinning arrow

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 CodeResult
Swimming fish Swimming fish Swimming fish Swimming fish Swimming fish

Marquee Usability

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

Also note that the <marquee> tag is not part of the official HTML specification. Having said that, it is recognized by most major browsers.

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:

About HTML.am

HTML.am was created in order to provide HTML tools, codes, tutorials, and other resources to help webmasters create and maintain their HTML documents.

HTML.am aims primarily at beginners, but may also be useful to web professionals.

About the HTML Codes

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

My Related Sites

Here are some of my other sites: