Detailed explanation of CSS3 to achieve infinite loop seamless scrolling-CSS Tutorial-php.cn

Detailed explanation of CSS3 to achieve infinite loop seamless scrolling

小云云

Release： 2017-12-19 10:06:20

Original

6286 people have browsed it

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 example code of using CSS3 to achieve infinite loop seamless scrolling. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

Clone A and place an identical copy of data B behind the original data A;
Use setInterval to scroll up the parent container of A;
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 leaked 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 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;
}

Copy after login

html:

<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>

Copy after login

The running effect is as follows:

2. When the data is uncertain

In the above section, the data is dead and the height is also hard-coded 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 will use overwriting to recalculate the data in keyframes:

// 设置keyframes属性
function addKeyFrames(y){
    var style = document.createElement(&#39;style&#39;);
    style.type = &#39;text/css&#39;;
    var keyFrames = &#39;\
    @-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);\
        }\
    }&#39;;
    style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, y);
    document.getElementsByTagName(&#39;head&#39;)[0].appendChild(style);
}

Copy after login

After calculating the height of the original data A, execute the addKeyFrames method and add css attributes to the head. Then the rowup here will overwrite the previous setting. The distance of each scroll is data A. The height of Left, right, and downward are easier to understand. 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 achieved with CSS, you can try to use CSS to achieve itRelated recommendations:

javascript to achieve seamless scrolling effect of carousel

Detailed explanation of the example code of JavaScript seamless scrolling effect

The left and right seamless scrolling effect achieved by javascript

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