<div class = "main">
  
  <marquee class = "one" scrollamount="1" direction="down">One</marquee>
  
  <marquee class = "two" scrollamount="2" direction="down">Two</marquee>
  
  <marquee  class = "three" scrollamount="3" direction="down">Three</marquee>
  
  <marquee class = "four" direction="down" scrollamount="4" >Four</marquee>
  
<marquee class = "five" direction="down" scrollamount="5" >Five </marquee>
  
<marquee class = "six" scrollamount="6" direction="down">Six </marquee>
  
<marquee class = "seven" scrollamount="7" direction="down">Seven</marquee>
  
<marquee class = "eight" scrollamount="8" direction="down">Eight</marquee>
  
<marquee class = "nine" scrollamount="9" direction="down"> Nine</marquee>
  
<marquee class = "ten"  scrollamount="10" direction="down"> Ten</marquee>
</div>


.main { 
  max-height:500px;
  font-family:Georgia;
  font-size:12pt;
  color:blue;
  font-weight: bold;
}

.one { 
  position:relative;
  left:122px;
  top:0px;
  height:397px;
}

.two {
  position:relative;
  left:8px;
  top:-397px;
  height:175px;
}

.three {
  position:relative;
  left:151px;
  top:-550px;
  height:235px;
}

.four {
  position:relative;
  left:51px;
  top:-735px;
  height:161px;
}

.five {
  position:relative;
  left:124px;
  top:-961px;
  height:337px;
}

.six {
  position:relative;
  left:122px;
  top:-1213px;
  height:397px;
}

.seven {
  position:relative;
  left:55px;
  top:-1691px;
  height:231px;
}

.eight {
  position:relative;
  left:98px;
  top:-1900px;
  height:127px;
}

.nine {
  position:relative;
  left:93px;
  top:-2100px;
  height:355px;
}

.ten {
  position:relative;
  left:279px;
  top:-2504px;
  height:475px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.