Walkthrough CSS3 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)? This article mainly introduces the use of CSS3 to achieve infinite loop seamless scrolling example code, small series feel very good, and now share to everyone, but also for everyone to do a reference. Follow the small series together to see it, hope to help everyone.

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

2. Use SetInterval to scroll up the parent container of A;

3. When the upward scroll 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

To be implemented with CSS3 properties, non-animation, because transition is a manual trigger and cannot be executed indefinitely, animation just solves the 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;}

HTML format:

<p class= "List" > <p class= "cc rowup" > <p class= "item" &GT;1-121233FFFFFR countries recognize more health import price distress </p> <p class= "Item" >2-3123233</p> <p class= "item" >3-population structure Russia entered the International Science and Technology Museum guests feel </p> <p Class= "Item" >4-ggrgerg</p> <p class= "item" >5-fvdgdv</p> <p class= "item" >6-Germany South Bus and truck crash, 31 wounded, 11 dead, Park Geun-hye suddenly unconscious supporters: She's dead, the judge is in charge! </p> <p class= "Item" >7-the Ministry of Foreign Affairs once again responds to Indian cross-border: calls for immediate withdrawal of cross-border forces </p> <p class= "item" >8-German net red letter to Merkel <        /p> <p class= "item" >9-SASAC </p> <p class= "item" &GT;1-121233FFFFFR countries recognized more health import price distress </p>  <p class= "Item" >2-3123233</p> <p class= "item" >3-population structure Russia entered the International Science and Technology Museum guests feel </p> <p Class= "Item" >4-ggrgerg</p> <p class= "item" >5-fvdgdv</p> <p class= "item" >6-Germany South A bus collided with a truck and a fire 31 people were injured and 11 people died. Park Geun-hye suddenly unconscious supporters: She's dead, the judge is responsible! </p> <p class= "Item" >7-the Foreign Ministry's response to India's cross-border: requirementsImmediate withdrawal of cross-border forces </p> <p class= "item" >8-German net red letter to Angela Merkel </p> <p class= "item" >9-SASAC </p> </p></p>

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:tra Nslate3d (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); document.getElementsByTagName (' head ') [0].appendchild (style);} 

After calculating the height of the original data A, executing the Addkeyframes method and adding CSS properties to the head, the rowup here will overwrite the previously set, and each scrolling distance is the height of data A:

function init () {    var data = ' The scenery is different from the fall, the Hengyang geese 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) +6,//length of the data        html = ' <p class= ' ss ' > ';        for (var i=0; i<len; i++) {        var start = parseint (Math.random () * (data_len-20)),            s = parseint (Math.random ( ) *data_len);        HTML + = ' <p class= "item" v> ' +i+ '-' +data.substr (start, s) + ' </p> ';    }    HTML + = ' </p> ';    Document.queryselector ('. List. cc '). InnerHTML = html+html; Copy a piece    of data var height = document.queryselector ('. List. SS '). offsetheight;//A high degree of data    addkeyframes ('-' +height + ' px '); Set keyframes    document.queryselector ('. List. cc '). ClassName + = ' rowup ';//Add rowup}init ();

3. Horizontal scrolling

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

4. Summary

The use of CSS to animate the display, will make the page appear more fluent. If you can use CSS to implement, you can try to use CSS to implement the next.