Seamless scrolling effect with CSS3 for infinite loops

This time, we bring you a seamless scrolling effect with CSS3 to achieve infinite loops, CSS3 to realize the seamless scrolling effect of infinite loops what to note, here is the actual case, take a look.

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 to scroll up the parent container of 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

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:

@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);}    . 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:

<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-National Capital </p> <p class= "item" &GT;1-121233FFFFFR countries recognized more health import price distress </p> &L T;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= "I Tem ">4-ggrgerg</p> <p class=" item ">5-fvdgdv</p> <p class=" item ">6-Germany South bus and truck collided Fire 31 wounded 11 people died Park Geun-hye suddenly unconscious supporters: She died, the judge is responsible! </p> <p class= "Item" >7-the Foreign Ministry's response to India's cross-border: demand immediate withdrawal of cross-border forces</p> <p class= "item" >8-German net red letter to Angela Merkel </p> <p class= "item" >9-SASAC </p> &LT;/P&GT;&L T;/p>

The effect of the operation is as follows:

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

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

CSS selector use of the detailed

Specific tips for using CSS margin