html - Advanced Marquee transition -
<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 admission 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 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 show elements in group of 3 i.e first 3 elements should slide up, remain on screen 3 seconds , slide up. next 3 elements become visible sliding up. how achieve effect ?
don't use marquee, not supported browsers , scheduled removal. source: https://developer.mozilla.org/en/docs/web/html/element/marquee
you need use javascript or css 3 animations. example using css3 animations: http://codepen.io/anon/pen/jwezpm
/* 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} } /* element apply animation */ .menu { margin: 0; padding: 0; height: 90px; animation: example 8s infinite; } .menu li { display: block; margin: 0; padding: 0; height: 30px; line-height: 30px; }
Comments
Post a Comment