CSS Marquee


Go to main Page

Marquee in CSS

Marquee effect

<marquee> is a scrolling animation to scroll text and images.

<marquee> is used to create vertical and horizontal scrolling effects.

For creating a marquee you have to use the tag and define its direction.


      <h1><marquee direction="up">This is Text</marquee></h1>
  



Marquee Effect on Images

We can also apply the marquee effect to images.


      <marquee direction="up">
<img src="https://cdn.pixabay.com/photo/2021/02/06/19/29/pancakes-5989136__340.jpg" width="300px" height="300px">
<img src="https://cdn.pixabay.com/photo/2020/12/10/10/17/jasper-national-park-5819878__340.jpg" width="300px" height="300px">
<img src="https://cdn.pixabay.com/photo/2019/04/24/14/48/hanover-4152279__340.jpg" width="300px" height="300px">

      </marquee></h1>
  



Marquee effect on container

By placing a div in the marquee tag we can easily apply the marquee effect on the container.


      <style>
    div{
        width: 200px;
        height:200px;
        background-color: powderblue;
    }
</style>
      <marquee direction="right">
     <div>

     </div>
              </marquee></h1>