Html5 mobile terminal award-winning seamless scrolling animation implementation-H5 Tutorial-php.cn

This article mainly introduces the implementation example of the award-winning seamless scrolling animation on the Html5 mobile terminal. The content is quite good. I will share it with you now and give it as a reference.

This article introduces the implementation example of the award-winning seamless scrolling animation on the Html5 mobile terminal and shares it with everyone. The details are as follows:

Requirement Analysis

Haha, the dynamic picture above is really awesome. It becomes clear.

It’s rolling, rolling, so what’s the way to make this? Let’s summarize:

html skeleton

is actually very simple. The outermost

is a fixed window, and the inner

Inside is a display animation

<p class="roll" id="roll">
    <ul>
         <li>第一个结构</li>
         <li>第二个结构</li>
         <li>第三个结构</li>
         <li>第四个结构</li>
         <li>第五个结构</li>
         <li>第六个结构</li>
         <li>第七个结构</li>
         <li>第八个结构</li>
    </ul>
</p>

Copy after login

Basic css style

First implement the basic css style

*{
    margin:0;
    padding:0;
}
.roll{
    margin: 100px auto;
    width: 200px;
    height: 40px;
    overflow:hidden;
    border: 1px solid aquamarine;
}
.roll ul{
    list-style: none;
}
.roll li{
    line-height:20px;
    font-size:14px;
    text-align:center;
}

Copy after login

You can have a rough look Style:

Implementation ideas

1. Use jquery’s animate animation

animate() method

$(selector).animate(styles,speed,easing,callback)

Parameters:
styles: Required parameter, css style that needs to generate animation (use camel case naming)
speed: Specifies the speed of animation
@number:1000(ms)
@string:"slow","normal","fast "
easing: animation speed (swing, linear)
callback: callback function after the function is executed

    $(document).ready(function(){
            setInterval(function(){  // 添加定时器，每1.5s进行转换
                $("#roll").find("ul:first").animate({
                        marginTop:"-40px"  //每次移动的距离
                },500,function(){   // 动画运动的时间
                        //$(this)指的是ul对象，
                        //ul复位之后把第一个元素和第二个元素插入
                        //到ul的最后一个元素的位置
                        $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
                        $(this).find("li:first").appendTo(this);
                });
            },1500)
        });

Copy after login

Look at the effect:

2. Use css3 animation

Through the key frames in css3, you can get the effect of jumping. Let’s take a short look at the idea first.

Preliminary

1. If it is a hard-coded award, then you need to copy the previous one to the back. If it is scrolling one by one, then copy the first one. One, if there are two scrolls, copy the first and second.

<p class="roll" id="roll">
        <ul>
             <li>第一个结构</li>
             <li>第二个结构</li>
             <li>第三个结构</li>
             <li>第四个结构</li>
             <li>第五个结构</li>
             <li>第六个结构</li>
             <li>第七个结构</li>
             <li>第八个结构</li>
             <li>第一个结构</li>
             <li>第二个结构</li>
        </ul>
</p>

Copy after login

2. Then calculate how many times it needs to be scrolled and how many seconds at a time. The example is two scrolls, which takes 5s, so the animation time of CSS3 is 5s. So how many parts does @keyframe need to be divided into? Because it is a pause, each scroll requires two copies, and the last one has to jump so there is only one copy, so 5 * 2 - 1 = 9 copies are needed. You will know by looking at the code:

/*这里不做兼容性处理*/
.roll ul{
    list-style: none;
    animation: ani 5s  linear infinite;  /*动画ani，5s，循环匀速播放*/
}
@keyframes ani{  
    0%{
        margin-top: 0;
    }
    12.5%{
        margin-top: 0;
    }
    25%{
        margin-top: -40px;
    }
    37.5%{
        margin-top: -40px;
    }
    50%{
        margin-top: -80px;
    }
    62.5%{
        margin-top: -80px;
    }
    75%{
        margin-top: -120px;
    }
    87.5%{
        margin-top: -120px;
    }
    100%{
        margin-top: -160px; /*最后是一个，这样可以打断动画*/
    }
}

Copy after login

Advanced

If the number is uncertain, then dynamic calculation is needed. Use js to dynamically add @keyframes. At that time, as long as you can calculate the interval and moving distance clearly, good.

1. First get the length of

2. Then calculate the interval percentage. Because there is a pause, remember to use the number of seconds × 2
3. Then use a string to spell @keyframes , 0~length, including length, because there is one more, even numbers and odd numbers are separated.
4. Clone the first and second words in