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

Today, the editor will share with you the relevant knowledge points about the methods to achieve on-screen comment in the front end of html. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

1. Css3 realizes the on-screen comment of beggar version.

(1) how to realize on-screen comment through css3

First, let's take a look at how to implement the simplest on-screen comment through css's method:

First, define the dom structure of a barrage in html:

I'm the barrage.

The movement of the barrage can be realized by moving the block. Take the barrage moving from right to left as an example. The initial position of the barrage is on the left side of the container and is hidden (the leftmost part of the barrage fits the rightmost part of the container). It can be realized by absolute positioning and transform:

.block {position:absolute;}

Initial position:

From {left:100%; transform:translateX (0)}

Move to the leftmost end position (the rightmost part of the barrage fits the leftmost part of the container):

To {left:0; transform:translateX (- 100%)}

You can define two complete on-screen animations based on the start and end positions:

@ keyframes barrage {from {left:100%; transform:translateX;} to {left:0; transform:translateX (- 100%);}}

Introduce this animation to the on-screen comment element:

.block {position:absolute; / * other decorate style * / animation:barrage 5s linear 0s;}

In this way, a beggar version of the bullet screen effect can be achieved.

(2) the defect of realizing on-screen comment by absolute positioning and left.

First of all, let's clarify the rendering process of css.

I) generate DOM tree according to the structure of HTML (DOM tree contains nodes of display:none) II) on the basis of DOM tree, generate render tree according to the geometric attributes of nodes (margin/padding/width/height/left, etc.) III) continue to render attributes such as color,font on the basis of render tree

If the attributes in I) and II) change, reflow (reflow) will occur, and if only the attributes in III) change, only repaint (redrawing) will occur. Obviously from the rendering process of css we can also see that reflow (reflux) must be accompanied by emphasis.

Reflow (reflow): the process that needs to be rebuilt when some or all of the render tree changes due to problems such as size and margin is called redrawing repaint: when some attributes of an element change, such as the appearance background color does not cause layout changes, the process that needs to be rerendered is called redrawing.

Reflow (reflux) will affect the rendering speed of the browser css, so it is necessary to reduce the occurrence of reflux when optimizing the performance of web pages.

In the first section, we achieve the effect of on-screen comment through the left attribute. Left will change the layout of the element, so reflow (backflow) will occur, which will cause stutter in the on-screen comment animation on the mobile page.

2. Performance optimization of css3 barrage.

Until we have the problem of stutter in the on-screen comment animation in the first section, let's take a look at how to solve the stutter of animation.

(1) enable hardware acceleration in CSS

Enable hardware acceleration with css in the browser, and use GPU (Graphics Processing Unit) to improve the performance of web pages. In view of this, we can use the power of GPU to make our website or application perform more smoothly.

CSS animations, transforms, and transitions do not automatically turn on GPU acceleration, but are performed by the browser's slow software rendering engine. So how can we switch to GPU mode? many browsers provide some triggered CSS rules.

In a more common way, we can enable hardware acceleration through 3D changes (translate3d attribute). In view of this, we modify the animation to:

@ keyframes barrage {from {left:100%; transform:translate3d (0penol 0);} to {left:0; transform:translate3d (- 100% focus 0);}}

In this way, you can optimize the performance of web pages by turning on hardware acceleration. However, this approach does not fundamentally solve the problem, while the use of GPU increases the use of memory, reduces the battery life of mobile devices, and so on.

(2) do not change the left attribute

The second way is to find a way not to change the value of the left property before and after the on-screen comment animation, so that reflow does not occur.

We want to determine the initial position of the on-screen comment node only through translateX, but the translateX (- 100%) is relative to the on-screen comment node itself, not to the parent element, so we couple js and css to get the width of the parent element where the on-screen comment node is located in js, and then define the initial position of the on-screen comment node according to the width.

For example, if the parent element is body:

/ / css .block {position:absolute; left:0; visibility:hidden; / * other decorate style * / animation:barrage 5s linear 0s;} / / jslet style = document.createElement ('style'); document.head.appendChild (style); let width = window.innerWidth;let from = `from {visibility: visible;-webkit-transform: translateX (${width} px);} `; let to = `to {visibility: visible;-webkit-transform: translateX (- 100%);}` Style.sheet.insertRule (`@-webkit-keyframes barrage {${from} ${to}}`, 0)

In addition to coupling js to calculate the width of the parent element to determine the initial position of the on-screen comment node, we have added the visibility:hidden attribute in the on-screen comment node to prevent the initial position from being displayed. Prevents the barrage node from being displayed in the parent container when the initial position is not determined. The barrage will not become visible until it starts scrolling from its original position.

However, the implementation of this kind of css is troublesome to achieve the extended function of the on-screen comment, such as how to control the pause of the on-screen comment and so on.

3. Canvas to realize on-screen comment

In addition to the method of realizing the on-screen comment through css, the on-screen comment can also be realized through canvas.

The principle of realizing the on-screen comment through canvas is to redraw the text from time to time, which can be realized step by step.

Get the canvas

Let canvas = document.getElementById ('canvas'); let ctx = canvas.getContext (' 2d')

Draw text

Ctx.font = '20px Microsoft YaHei'; ctx.fillStyle =' # 000000000; ctx.fillText ('canvas draw text', x, y)

The fillText above is the main api to achieve the barrage effect, in which x represents the horizontal coordinates and y represents the longitudinal coordinates. As long as you change the x _ ray y from time to time to redraw, you can achieve the dynamic barrage effect. Copy the code

Clear the drawing

Ctx.clearRect (0,0, width, height)

Concrete realization

Through the timer, change the xQuery y on a regular basis, clear the screen before each change, and then redraw it according to the changed xQuery y. When there are multiple on-screen comments, define:

Let colorArr=_this.getColor (color); color array let numArrL=_this.getLeft () corresponding to on-screen comment array; array of x-coordinate position corresponding to on-screen comment array let numArrT=_this.getTop (); array of y-coordinate position corresponding to on-screen comment array let speedArr=_this.getSpeed (); array of moving speed of on-screen comment array

The function for redrawing on-screen comment at a fixed time is:

_ this.timer=setInterval (function () {ctx.clearRect); ctx.save (); for (let jung0

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.