<marquee direction="up" behavior="scroll" scrollamount="3" onmouseover="this.scrollAmount=1" onmouseout="this.scrollAmount=3" style="height:295px;margin-top:10px;">
<ul class="menu">
<li><i class="fa fa-caret-right"></i><a href="#"> (DASA) 2014-15 <img class="new-tag" src="assets/img/new.gif"/></a></li>
<li><i class="fa fa-caret-right"></i><a href="#"> Advertisement for admission to SC seats 2014</a></li>
<li><i class="fa fa-caret-right"></i><a href="#"> Notification - SC/ST & Minority Cell</a></li>
<li><i class="fa fa-caret-right"></i><a href="#"> Information About SC-ST Scholarship</a></li>
<li><i class="fa fa-caret-right"></i><a href="#"> Project Vacancy: (JRF) <img class="new-tag" src="assets/img/new.gif"/> </a></li>
<li><i class="fa fa-caret-right"></i><a href="#"> PG Admission (January Session) 2015</a></li>
</ul><!-- /.menu -->
</marquee>
I wish to show the elements in a group of 3 i.e first 3 elements should slide up, remain on screen for 3 seconds and then slide up. Then next 3 elements will become visible by sliding up. How do I achieve this effect ?
Don't use marquee, it is not supported by all browsers and scheduled for removal. Source: https://developer.mozilla.org/en/docs/Web/HTML/Element/marquee
You will need to use JavaScript or CSS 3 animations. An example using CSS3 animations: http://codepen.io/anon/pen/jWezPm
/* The animation code */
@keyframes example {
0% {margin-top: 0; height: 90px;}
20% {margin-top: 0; height: 90px;}
25% {margin-top: -90px; height: 180px;}
45% {margin-top: -90px; height: 180px;}
50% {margin-top: -180px; height: 270px;}
70% {margin-top: -180px; height: 270px;}
75% {margin-top: -270px}
95% {margin-top: -270px}
}
/* The element to apply the animation to */
.menu {
margin: 0;
padding: 0;
height: 90px;
animation: example 8s infinite;
}
.menu li {
display: block;
margin: 0;
padding: 0;
height: 30px;
line-height: 30px;
}