Use CSS3 to achieve infinite loop seamless scrolling effect

This time I will bring you the seamless scrolling effect of infinite loop using CSS3, and the seamless scrolling effect of infinite loop achieved with CSS3. Notes What are the following, let’s take a look at the practical cases below.

Sometimes in a certain module of the page, some messages need to be scrolled in an infinite loop. So what is the idea if we use js to achieve seamless scrolling (for example, our module scrolls upward)?

1. Clone A and place an identical copy of data B behind the original data A;

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

3. When the upward scrolling distance L is exactly the height of A (L==A.height()), L=0, restart scrolling, and infinite loop.

Clone a copy of the data and place it at the back so that when A moves upward, there will be data at the back to fill in the gaps. When B moves to the top of visual area, and A just moves out of the visual area, then the container is reset to 0. The user does not perceive it and thinks it is still the first piece of data in B. . Then keep scrolling up.

1. Use CSS3 to implement

If you want to use CSS3 attributes to implement it, it must be animation, because transition needs to be done manually. Triggered, and cannot be executed indefinitely, and animation can solve this problem.

If the data is hard-coded, we can manually copy a copy of the data and put it behind, and then write the height of the original data into css. The implementation 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>
    </p><p>
        </p><p>1- 121233fffffr国家认可更健康进口价格困扰</p>
        <p>2- 3123233</p>
        <p>3- 个人口结构俄跨入国际科技馆客人感觉</p>
        <p>4- ggrgerg</p>
        <p>5- fvdgdv</p>
        <p>6- 德国南部巴士与卡车相撞起火 31人受伤11人死亡朴槿惠庭审时突然昏迷 支持者：她死了法官要负责！</p>
        <p>7- 外交部再次回应印军越界:要求立即将越界部队撤回</p>
  <p>8- 德国网红致信默克尔</p>
     <p>9- 国资委原</p>
        <p>1- 121233fffffr国家认可更健康进口价格困扰</p>
        <p>2- 3123233</p>
        <p>3- 个人口结构俄跨入国际科技馆客人感觉</p>
        <p>4- ggrgerg</p>
        <p>5- fvdgdv</p>
        <p>6- 德国南部巴士与卡车相撞起火 31人受伤11人死亡朴槿惠庭审时突然昏迷 支持者：她死了法官要负责！</p>
        <p>7- 外交部再次回应印军越界:要求立即将越界部队撤回</p>
        <p>8- 德国网红致信默克尔</p>
     <p>9- 国资委原</p>
    

The running effect is as follows:

2. When the data is uncertain

In the above section, the data is dead and the height is hard-coded into CSS3. But what should we do if the number of data obtained from the interface is uncertain and the length of each piece of data is also uncertain?

Here we need to recalculate the height based on the data and write it into CSS, but it is more troublesome to modify keyframes, so we use overwriting to recalculate the data in keyframes:

// 设置keyframes属性
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);
    document.getElementsByTagName('head')[0].appendChild(style);
}

After calculating the height of the original data A, execute the addKeyFrames method and add the css attribute to the head. Then the rowup here will overwrite the previous setting. The distance of each scroll is the height of data A:

function init(){
    var data = '塞下秋来风景异，衡阳雁去无留意。四面边声连角起，千嶂里，长烟落日孤城闭。浊酒一杯家万里，燕然未勒归无计。羌管悠悠霜满地，人不寐，将军白发征夫泪。', //样例数据
        data_len = data.length,
        len = parseInt(Math.random()*6)+6, // 数据的长度
        html = '<p>';
    
    for(var i=0; i<len>'+i+'- '+data.substr(start, s)+'</len></p>';
    }
    html += '';
    document.querySelector('.list .cc').innerHTML = html+html; // 复制一份数据
    var height = document.querySelector('.list .ss').offsetHeight; // 一份数据的高度
    addKeyFrames( '-'+height+'px' ); // 设置keyframes
    document.querySelector('.list .cc').className += ' rowup'; // 添加 rowup
}
init();

3. Horizontal scrolling

The above explanations are all about scrolling upward, so it is easier to understand left, right, and downward. Change the Just change the value to the corresponding value.

4. Summary

Using CSS to display animations will make the page appear smoother. If it can be implemented with CSS, you can try to implement it with CSS as much as possible

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the use of CSS Selector

Detailed explanation of the special usage skills of CSS margin

The above is the detailed content of Use CSS3 to achieve infinite loop seamless scrolling effect. For more information, please follow other related articles on the PHP Chinese website!