Examples to explain CSS3 to achieve infinite loop seamless scrolling

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)? This article mainly introduces the sample code for realizing infinite loop seamless scrolling using CSS3. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

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, the scrolling starts again, and the loop is endless.

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 the visible area, and A just moves out of the visible area, 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 triggered manually and cannot be executed infinitely, and animation is just right 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 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">1- 121233fffffr国家认可更健康进口价格困扰</p>
        <p class="item">2- 3123233</p>
        <p class="item">3- 个人口结构俄跨入国际科技馆客人感觉</p>
        <p class="item">4- ggrgerg</p>
        <p class="item">5- fvdgdv</p>
        <p class="item">6- 德国南部巴士与卡车相撞起火 31人受伤11人死亡朴槿惠庭审时突然昏迷 支持者：她死了法官要负责！</p>
        <p class="item">7- 外交部再次回应印军越界:要求立即将越界部队撤回</p>
        <p class="item">8- 德国网红致信默克尔</p>
        <p class="item">9- 国资委原</p>
        <p class="item">1- 121233fffffr国家认可更健康进口价格困扰</p>
        <p class="item">2- 3123233</p>
        <p class="item">3- 个人口结构俄跨入国际科技馆客人感觉</p>
        <p class="item">4- ggrgerg</p>
        <p class="item">5- fvdgdv</p>
        <p class="item">6- 德国南部巴士与卡车相撞起火 31人受伤11人死亡朴槿惠庭审时突然昏迷 支持者：她死了法官要负责！</p>
        <p class="item">7- 外交部再次回应印军越界:要求立即将越界部队撤回</p>
        <p class="item">8- 德国网红致信默克尔</p>
        <p class="item">9- 国资委原</p>
    </p>
</p>

2. When the data is uncertain

In the above section, the data is dead and the height is also written Dead 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 class="ss">';
    
    for(var i=0; i<len; i++){
        var start = parseInt( Math.random()*(data_len-20) ),
            s = parseInt( Math.random()*data_len );
        html += &#39;<p class="item"v>'+i+'- '+data.substr(start, s)+'</p>';
    }
    html += '</p>';
    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. Just change the value in transform 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.

Related recommendations:

Detailed explanation of vue’s seamless scrolling component

Javascript realizes the seamless scrolling effect of carousel images

Javascript sample code to achieve seamless left and right scrolling effect of multiple pictures

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