Html5 mobile terminal award-winning seamless scrolling animation implementation example

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:

needs analysis

Haha, it’s really clear immediately after uploading the dynamic picture.

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

It's actually very simple. The outermost <div> is used as a fixed window, the inner <ul> controls movement, and the inner <li> displays animations.

 <div class=roll id=roll> <ul> <li>The first structure</li> <li>The second structure</li> <li>The third structure</li> <li>The fourth structure</li> <li>The fifth structure</li> <li>The sixth structure</li> <li>The seventh structure</li> <li>The eighth structure</li> </ul></div>

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 take a look at the general style:

animate() method

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

parameter:

styles: required parameter, css style that needs to be animated (use camel case naming)

speed: Specifies the speed of the 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(){ // Add a timer to convert every 1.5s $(#roll).find(ul:first).animate({ marginTop:-40px // The distance of each movement},500,function(){ //The time of animation movement//$(this) refers to the ul object, //After ul is reset, insert the first and second elements //to the position of the last element of ul $(this).css({marginTop:0px}).find(li:first).appendTo(this ); $(this).find(li:first).appendTo(this); }); },1500) });

Take a look at the effect:

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

1. If it is a hard-coded award, then you need to copy the front one to the back. If it is rolled one by one, copy the first one. If it is rolled two by two, copy the first and second one. indivual.

 <div class=roll id=roll> <ul> <li>The first structure</li> <li>The second structure</li> <li>The third structure</li> <li>The fourth structure</li> <li>The fifth structure</li> <li>The sixth structure</li> <li>The seventh structure</li> <li>The eighth structure</li> <li>First structure</li> <li>Second structure</li> </ul></div>

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 it by looking at the code:

 /*No compatibility processing is done here*/.roll ul{ list-style: none; animation: ani 5s linear infinite; /*Animation ani, 5s, played at a constant speed in a loop*/}@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; /*The last one is one, which can interrupt the animation*/ }}

If the number is uncertain, then you need to calculate it dynamically and use js to dynamically add @keyframes. At that time, as long as you can calculate the interval and the distance of movement, it will be fine.

1. First get the length of <li>

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 <ul> to the end of <ul>

5. Create a <style> tag and add it to <head>

6. Add animation attributes to <ul>

Without further ado, let’s talk about the code:

 function addKeyFrame(){ var ulObj = $(#roll ul), //Get the ul object length = $(#roll li).length, //Get the li array length per = 100 / (length / 2 * 2 ); / /Calculate the percentage of intermediate intervals//Concatenate strings 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+='}'; var liFirst = $(#roll li:first), //Get the first element liSec = liFirst.next(); //Get the second element ulObj.append(liFirst.clone()).append(liSec.clone()); //Insert the two elements into ul $(<style>).attr(type,text/ css).html(keyframes).appendTo($(head)); //Create a style tag to insert keyframes into the head ulObj.css(animation,ani 5s linear infinite); //Add css3 animation to ul} addKeyFrame();

Zepto on the mobile side does not have an animate function. If you don’t use CSS3 attributes, how can you 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()); //Add the first and second to the <ul> tag clearInterval(timer); timer = setInterval(function(){ //Set the timer var top = ulObj.css(margin-top); top = + top.slice(0,-2); if(top != -(20 * length)){ //Get the current height. If it is not at the end, move up top -= 40; ulObj.css({-webkit-transition:all 1s,transition:all 1s,margin-top:top}); }else{ //If it reaches the end, it will quickly reach zero top = 0; ulObj.css({-webkit- transition:none,transition:none,margin-top:top}); setTimeout(function(){ //Add a delayer here, and it should be executed at the end of the queue, in order to avoid the two animations merging top -= 40; ulObj.css({-webkit-transition:all 1s,transition:all 1s,margin-top :top}); },0) } },2000);}roll();

If there is another way, 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. I also hope everyone will support VeVb Wulin Network.