Html5 mobile terminal barrage animation implementation example code

It is known that 20 pieces of content must have a barrage effect, divided into three layers, and the speed is random. Let’s take a look at the effect first:

Therefore, filling in the generated ones is not considered here. Just a display effect. If you want to see what you filled in, please don’t waste your time.

• Edit the individual content, calculate its own width, and determine the initial position.
• The distance moved is the screen width
• js dynamically adds css animation functions to control height, animation movement time, and animation delay time with random numbers

code

html skeleton structure

(It’s too long. Take three as an example. If you think the interface is too long and unfriendly, you can also dynamically generate it with js)

 <div class=cute-barrage><div class=barrage-div><img src=http://kw1-1253445850.file.myqcloud.com/static/image/stimg_7656dc02eb1cd13adbacbdd2695dc3a8.jpg/><span>Momoda withdraws <i>1Q coins today</i></span></div> <div class=barrage-div><img src=http://kw1-1253445850.file.myqcloud.com/static/image/stimg_632fecdcb52417cb8ab89fa283e07281.jpg/><span>The orange cat with big ears withdraws <i>5Q coins today</i></span>< /div><div class=barrage-div><img src=../../static/cutePresent/resource/avatar.png/><span>丶The deer pot contains Wu milk bag. Withdraw <i>3Q coins today</i></span></div>< /div>

css style

.cute-barrage determines the display range and position, the width is 100%, the height is customized, and the part beyond the horizontal direction is hidden.

.barrage-div content part, the length is determined by the content, and the position relative to the parent is determined

 html,body{ width:100%;}.cute-barrage{ width: 100%; height: 4rem; /*determine the length of the barrage*/ position: absolute; top: 1.5rem; /*determine the height of the barrage*/ left : 0; overflow-x: hidden; /*Hide the horizontal excess part*/ .barrage-div{ position: absolute; top: 0; right: -100%; /* Ensure that it is outside the interface at the beginning, from right to left is right, from left to right is left*/ height: 0.6rem; background-color: rgba(255, 255, 255, 0.9); border-radius: 2rem; white-space: nowrap; /*Make sure the content is displayed on one line, otherwise it will wrap when moved to the end*/ img{ width: 0.5rem; height: 0.5rem; vertical-align: middle; //Inline block element, centered alignment padding-left: 0.05rem; border-radius: 50%; } span{ font-size: 14px; padding: 0 0.1rem; line-height: 0.6rem ; //Inline block elements, four center-aligned elements are indispensable. height: 0.6rem; //Inline block elements, four center-aligned elements are indispensable. display: inline-block; //Inline block elements, four inline alignments are indispensable vertical-align: middle; //Inline block elements, four inline alignments are indispensable i{ color: #fe5453; font-weight: 700 ; } } }}

js dynamic animation implementation (zepto.js)

 //Barrage var winWidth = $(window).width(); //Get the screen width $(.barrage-div).each(function(index,value){ //Traverse each barrage var width = $( value).width(); //Get the width of the current barrage var topRandom = Math.floor(Math.random() * 3) + 'rem'; //Get the random number of 0,1,2 and change it according to the situation $(value).css({right:-width,top:topRandom}); //Move the barrage to the outside of the screen, just beyond the position // Spell animation frame function, remember that each ani must be distinguished, and the width moves from its own negative width by a distance of the entire screen var keyframes = `/ @keyframes ani${index}{ form{ right:${-width}px; } to{ right:${winWidth}px; } }/ @-webkit-keyframes ani${index}{ form{ right:${-width}px; } to{ right:${winWidth}px; } }`; // Add to the head tag of the page $(<style>).attr(type,text/css).html(keyframes).appendTo($(head)); //Define animation speed list var aniList = [3,5,7,9,11]; //Get random numbers from the array, 0,1,2,3,4 var aniTime =Math.floor(Math.random() * 5); //Give When adding animation css to the full front barrage //The delay time is *1.5 times of each, this variable $(value).css({animation:`ani${index} ${aniList[aniTime]}s linear ${index * 1.5}s`,-webkit-animation:`ani${index} ${aniList[aniTime]}s linear ${index * 1.5}s`});})

Then take a look at the browser effect:

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.