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="#">&nbsp;&nbsp;(dasa) 2014-15 <img class="new-tag" src="assets/img/new.gif"/></a></li>        <li><i class="fa fa-caret-right"></i><a href="#">&nbsp;&nbsp;advertisement admission  sc seats 2014</a></li>        <li><i class="fa fa-caret-right"></i><a href="#">&nbsp;&nbsp;notification - sc/st & minority cell</a></li>        <li><i class="fa fa-caret-right"></i><a href="#">&nbsp;&nbsp;information sc-st scholarship</a></li>        <li><i class="fa fa-caret-right"></i><a href="#">&nbsp;&nbsp;project vacancy: (jrf) <img class="new-tag" src="assets/img/new.gif"/> </a></li>        <li><i class="fa fa-caret-right"></i><a href="#">&nbsp;&nbsp;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

Popular posts from this blog

sublimetext3 - what keyboard shortcut is to comment/uncomment for this script tag in sublime -

java - No use of nillable="0" in SOAP Webservice -

ubuntu - Laravel 5.2 quickstart guide gives Not Found Error -