Html5 mobile terminal award-winning seamless scrolling animation implementation

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 e388a4556c0f65e1904146cc1a846bee is a fixed window, and the inner ff6d136ddc5fdfeffaf53ff6ee95f185 controls movement. , 25edfb22a4f469ecb59f1190150159c6 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>

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

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)
        });

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>

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; /*最后是一个，这样可以打断动画*/
    }
}

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 25edfb22a4f469ecb59f1190150159c6
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 ff6d136ddc5fdfeffaf53ff6ee95f185 to the end of ff6d136ddc5fdfeffaf53ff6ee95f185
5. Create a c9ccee2e6ea535a969eb3f532ad9fe89 tag and add it to 93f0f5c25f18dab9d176bd4f6de5d30e
6 .Add animation attributes to ff6d136ddc5fdfeffaf53ff6ee95f185

Not much to say about the code:

   function addKeyFrame(){
       var ulObj = $("#roll ul"),  //获取ul对象
             length = $("#roll li").length,  //获取li数组长度
             per = 100 / (length / 2 * 2 );  //计算中间间隔百分比
       // 拼接字符串
       var keyframes = `\    
       @keyframes ani{`;
       for(var i = 0 ; i<=length ; i++ ){
           keyframes+=`${i * per}%{
                           margin-top: ${i % 2 == 0 ? -i * 20 : -(i - 1) * 20}px;
                       }`;
       }
       keyframes+=&#39;}&#39;;
       var liFirst = $("#roll li:first"),   //获取第一个元素
           liSec = liFirst.next();    //获取第二个元素
       ulObj.append(liFirst.clone()).append(liSec.clone());   //将两个元素插入到ul里面
       $("<style>").attr("type","text/css").html(keyframes).appendTo($("head"));    //创建style标签把关键帧插入到头部
       ulObj.css("animation","ani 5s linear infinite");  //给ul添加css3动画
   }
   addKeyFrame();

3. Zepto transition implementation

Zepto on the mobile side does not have If the animate function does not use CSS3 attributes, how to write it in JS?

var timer,top;
function roll(){
    var ulObj = $("#roll").find("ul"),
        length = $("#roll li").length,  
        liFirst = $("#roll").find("li:first");
        liSec = liFirst.next();
    ulObj.append(liFirst.clone()).append(liSec.clone());  //把第一个第二个都添加到<ul>标签中
    clearInterval(timer);
    timer = setInterval(function(){  //设置定时器
        var top = ulObj.css("margin-top");
        top = +top.slice(0,-2);
        if(top != -(20 * length)){  //获取现在的高度如果没有到最后就上移
            top -= 40;
            ulObj.css({"-webkit-transition":"all 1s","transition":"all 1s","margin-top":top});
        }else{  //如果到了最后就迅速到零
            top = 0;
            ulObj.css({"-webkit-transition":"none","transition":"none","margin-top":top});
            setTimeout(function(){  //这里加一个延时器，也是要放在队列最后去执行，为了避免两个动画合并
                top -= 40;
                ulObj.css({"-webkit-transition":"all 1s","transition":"all 1s","margin-top":top});
            },0)
        }
    },2000);
}

roll();

If there are other methods, I will update it from time to time next time. But for mobile, these should be enough.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Use HTML5 Canvas to implement a masturbation game

HTML5 Canvas to implement a pixel-wide thin line

How to use canvas to implement image mosaic

The above is the detailed content of Html5 mobile terminal award-winning seamless scrolling animation implementation. For more information, please follow other related articles on the PHP Chinese website!