CSS3 for seamless scrolling with infinite loops

Sometimes in a module of a page, you need to scroll some messages in an infinite loop. So what if we use JS to achieve a seamless rolling idea (for example, our module is scrolling up)?

1. Clone a a copy of the exact same data B is placed behind the original data A;
   

2. Use setInterval the parent container to scroll up a;
   

3. When you scroll up the distance L is exactly the height of a (l==a.height ()), l=0, restart Scrolling, infinite loop.

Cloning a copy of the data is placed in the back, in order to when a upward movement, the back of the data can fill the missing blank. When B moves to the top of the viewable area, at which point a just moves out of the viewable area, the container is returned to 0, and the user is not aware of the first data in B. Then continue scrolling up.

1. Use CSS3 to achieve

animation mo, because transition is required to trigger manually, and can not be carried out indefinitely, and animation happens to solve this problem.

If the data is in the case of writing dead, we can manually copy a piece of data in the back, and then write the height of the original data into the CSS, the idea is the same as above:

CSS style:

@keyframes  rowup {    0% {        - Webkit-transform: translate3d (0, 0, 0);         Transform: translate3d (0, 0, 0);     }    100% {         -webkit-transform: translate3d (0, -307px, 0);         transform: translate3d (0, -307px, 0);         display: none;    }}.list{     width: 300px;    border: 1px solid  #999;     margin: 20px auto;    position: relative;     Height: 200px;    overflow: hidden;}. List .rowup{    -webkit-animation: 10s rowup linear infinite normal;    animation: 10s rowup linear  infinite normal;    position: relative;}

<div class= "List" >    <div class= "Cc rowup" >         <div class= "Item" &GT;1-&NBSP;121233FFFFFR Country recognizes more health import price distress </div>         <div class= "Item" >2- 3123233</div>         <div class= "Item" >3-  population structure Russia entered the International Science and Technology Museum guests feel </div>         <div class= "Item" >4- ggrgerg</div>         <div class= "Item" >5- fvdgdv</div>         <div class= "Item" >6-  South German bus and truck collided with a fire  31 injured 11 people killed Park Geun-hye was suddenly unconscious in court.   Supporters: She's dead, the judge is in charge! </div>        <div class= "Item" >7-  Ministry of Foreign Affairs responds to India's cross-border: Request for immediate withdrawal of cross-border forces </div>        <div class= "item" >8-  GermanyNET red letter to Angela Merkel </div>        <div class= "item" >9-  National Capital Committee original </div>        <div class= "Item" >1-  121233FFFFFR countries recognise healthier import prices troubled </div>        <div class= "item" >2- 3123233</div>        <div class= "Item" >3-   Population structure Russia entered the International Science and Technology Museum guests feel </div>        <div class= "item" >4- ggrgerg</div>        <div class= "Item" >5-  fvdgdv</div>        <div class= "Item" >6-  South German bus and truck collided with fire  31 injured 11 people killed Park Geun-hye's sudden coma   supporters: She's dead, the judge is in charge! </div>        <div class= "Item" >7-  Ministry of Foreign Affairs responds to India's cross-border: Request for immediate withdrawal of the cross-border forces &LT;/DIV&GT;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&LT;DIV&NBSp;class= "Item" >8-  German net red letter to Merkel </div>        <div  Class= "Item" >9-  National Capital Commission </div>    </div></div>

The effect of running the following view instance 1:

2. When data is uncertain

In the above section, the data is dead, and the height is written dead to the CSS3. But what if the number of data obtained from the interface is uncertain, and the length of each data is uncertain?

Here it is necessary to recalculate the height according to the data, and write to the CSS, but keyframes is still more troublesome to modify, then we will use the method of overwriting to re-keyframes the data:

  Set keyframes property Function addkeyframes (y) {    var style =  Document.createelement (' style ');    style.type =  ' text/css ';     var keyFrames =  ' \    @-webkit-keyframes rowup {\         0% {\             -webkit-transform: translate3d (0, 0, 0);\             transform: translate3d (0, 0, 0);\         }\        100% {\             -webkit-transform: translate3d (0, A_DYNAMIC_VALUE,  0); \            transform: translate3d ( 0, A_DYNAMIC_VALUE, 0); \        }\    }\    @ keyframes rowup {\        0% {\             -webkit-transform: translate3d (0, 0, 0);\             transform: translate3d (0, 0,  0); \        }\        100%  {\            -webkit-transform:  Translate3d (0, a_dynamic_value, 0);\             transform: translate3d (0, a_dynamic_value, 0);\         }\    } ';     style.innerhtml = keyframes.replace (/a_dynamic_value/g, y); &nBsp;   document.getelementsbytagname (' head ') [0].appendchild (style);} 

Function init () {    var data =  ' plug Autumn to scenery different, Hengyang wild goose go without notice. Four sides of the sound connected to the angle, thousand peaks, long smoke sunset isolated city closed. Turbid Wine a cup of home Wanli, Richle not return to no count. Qiang tube leisurely frost everywhere, people insomnia, general white hair levy tears. ',  //sample Data         data_len = data.length,         len = parseint (Math.random () *6) length of +6, //  data          html =  ' <div class= ' ss ' > ';         for (var i=0; i<len; i++) {         var start = parseint ( math.random () * (data_len-20)  ),             s = parseint ( Math.random () *data_len  );        html +=  ' <div class= "item" v> ' +i+ ' -  ' +data.substr (start, s) + ' </div> ';     }    html +=  ' </div> ';     document.queryselector ('. list .cc '). innerhtml =  html+html; //  Copying a copy of the data     var height = document.queryselector ('. List .ss ') .offsetheight; //  a copy of the height of the data     addkeyframes (  '-' +height+ ' px '   '; //  set Keyframes    document.queryselector ('. list .cc '). ClassName  +=  '  rowup '; //  add  rowup}init ();

In this way, with the combination of CSS3 and JS, more perfect rendering seamless scrolling.

3. Horizontal scrolling

The above is explained by scrolling upward, then left, right, down is also easier to understand, the transform value of the change to the corresponding value can be

CSS3 for seamless scrolling with infinite loops