• Register
820 points
6 1

In this tutorial we are heading to learn about the <Marquee> tag that we mostly used to create scrollable text and images within a web page using HTML. there is no limit to display images in marquee style.

Scrollability is of two types:-

1. Horizontal scroll (left to right, right to left)
2.verticle scroll (up to down, down to up)

Instead of discussing both of them we will discuss only horizontal scroll.

Horizontal scroll

This section contains some images that can be scrolled in horizontal direction (left to right, right to left) by changing their direction attribute. If code is written as 

 direction="left"
Images/texts scroll towards the left side.
 direction="right"
Images/texts scroll towards the right side.

Approach

As we discussed above, we are going to use the <Marquee> tag in HTML for multiple images. Let me tell you a bit about the <Marquee> tag that we have already discussed. This tag we use for adding scroll effects on a web page. For adding that style we need to use direction attribute and behavior="scroll" behavior is default with scroll direction is variable with conditions.

here is an example of right to left scrolling.

program

​
​
<!DOCTYPE html>
<html>
<body>

<marquee behavior="slide" direction="left">
     <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSpV3TUcapRrA06zT-yjaKO20nRRP7p6D35Og&usqp=CAU"> 
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR7I8XrjMXgGZq2eZurGJdhZvQvqYFyNOXCpw&usqp=CAU"> 
<img src="https://m.media-amazon.com/images/I/31wCV73+N2L.jpg " height="250" width="275"> </marquee>

</body>
</html>

​

​

output

Moving towards the left side.

image

Hope this will help.
 

820 points
6 1