Shulou(Shulou.com)06/01 Report--

Editor to share with you how to achieve HTML5 mobile on-screen animation effect, I believe that most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's learn about it!

Train of thought

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

two。 The distance moved is the width of the screen.

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

Code:

Html skeleton structure

(take three examples. If you think the interface is too long and unfriendly, you can also generate js dynamically.)

Once in January, the repayment period is up. Ha.

Sit back and wait for your salary.

Get rich, get rich, yeah.

Css style

.cute-barrage is to determine the scope and location of the display, the width is 100%, the height is self-defined, and the horizontal excess is hidden.

The barrage-div content section, whose length is determined by the content, determines the location relative to the parent

Html,body {width:100%;}. Cute-barrage {width:100%; height: 4remt; / * determine the on-screen comment length * / position: absolute; top: 1.5remt; / * determine the on-screen comment height * / left: 0; overflow-x: hidden; / * hide the horizontal excess part * / .barrage-div {position: absolute; top: 0; right:-100% / * make sure to start on the outside of the interface, from right to left is right, and from left to right is left*/ height: 0.6rem.background-color: rgba (255,255,255,0.9); border-radius: 2Reme; white-space: nowrap; / * make sure the content is displayed on one line, otherwise it will wrap at the end * / img {width: 0.5rem Height: 0.5rem.vertical-align: middle; / / inline block element, centered padding-left: 0.05rem.border-radius: 50%;} span {font-size: 14px; padding: 00.1remr; line-height: 0.6rem / / inline block elements, center-aligned four indispensable height: 0.6remm; / / inline block elements, center-aligned four indispensable display: inline-block; / / inline block elements, center-aligned four indispensable vertical-align: middle / / inline block elements, centered on four indispensable I {color: # fe5453; font-weight: 700;}

Js dynamic Animation implementation (zepto.js)

/ / on-screen comment var winWidth = $(window) .width (); / / get screen width $(".barrage-div") .each (function (index,value) {/ / traverse each on-screen comment var width = $(value). Width (); / / get the width of the current on-screen comment var topRandom = Math.floor (Math.random () * 3) + 'rem' / / you can change $(value) .css ({"right":-width, "top": topRandom}) according to the situation. / / move the on-screen comment to the outside of the screen, just beyond the position / / spell the animation frame function. Remember that each ani should be distinguished. The width moves the distance of the entire screen from its own negative width 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 $("). Attr (" type "," text/css ") .html (keyframes). AppendTo ($(" head ")) to the head tag of the page; / / define the animation speed list var aniList = [3Ling 5pm 7Mem 9J 11]; / / take the random number of the array, 0pm 1J 2J 4 var aniTime = Math.floor (Math.random () * 5) / / add the css / / delay of animation to the full front barrage with * 1.5x 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`}) }) these are all the contents of the article "how to achieve HTML5 Mobile on-screen Animation". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.