HTML5 realizes mobile terminal barrage animation effect

1. Edit the individual content, calculate its own width, and determine the initial position.

2. The distance moved is the screen width

3.js dynamically adds css animation functions to control the height, animation movement time, and animation delay time with random numbers.

(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>The monthly Huabei repayment period is here<i>Hahaha</i></span> </div> <div class=barrage-div> <img src=http://kw1-1253445850 .file.myqcloud.com/static/image/stimg_632fecdcb52417cb8ab89fa283e07281.jpg/> <span>Waiting for salary<i>Hehehe</i></span> </div> <div class=barrage-div> <img src=../../static/cutePresent/resource/avatar.png /> <span>Get rich, get rich<i>Yeah yeah yeah</i></span> </div></div>

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

 //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 numbers of 0, 1, 2 and change them 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 to distinguish each ani, and move the width 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`});})

The above is the HTML5 implementation of mobile barrage animation effects introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!

If you think this article is helpful to you, you are welcome to reprint it, please indicate the source, thank you!