CSS3 realizes the mask barrage function

CSS3 realizes the mask barrage function

Recently I saw a barrage effect on B station called smart anti-blocking barrage, which is the legendary masked barrage. After turning it on, the effect is probably like this

You no longer have to worry about the peerless beauty of your idol or goddess being blocked by flashy comments. Isn’t it magical?

The implementation principle is actually similar to the mask in PS, that is, "hiding" part of the image. What we need to use here is the mask attribute of CSS3.

CSS masks

The history of the CSS mask attribute is very long, even longer than CSS3 border-radius and other attributes. It first appeared on the Safari browser, almost as early as 2009. But at that time, IE was still the dominant force, and considering compatibility, it was not promoted. But now, IE is a thing of the past, so you can use it with confidence.

It is also relatively simple to use

<img src="ps1.jpg" class="mask-image">

The css code is as follows:

.mask-image {
    width: 250px;
    height: 187.5px;
    -webkit-mask-image: url(mask.png);
    mask-image: url(mask.png);
}

The mask can be a CSS3 gradient or a semi-transparent PNG image. When the alpha value of the mask element is 0, it will cover the elements below. When it is 1, the content below will be fully displayed. The effect is probably like this:

More properties and parameters of mask will not be studied here one by one. For details, please refer to this article: https://www.zhangxinxu.com/wordpress/2017/11/css-css3-mask-masks/

Well, with this property we can happily implement the masked bullet screen

First, we need a base map, which is simulated as a picture of a certain frame of the video.

Then we need a mask to cover the characters in the background

The display code is as follows:

HTML part:

<div class="container">
    <div class="barrage-wrapper">
    </div>
  </div>

CSS part:

.container {
  width: 900px;
  height: 506px;
  background: url(banner.jpg) no-repeat center;
  background-size: cover;
  
}
.barrage-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  mask-image: url(mask.png);
  -webkit-mask-image: url(mask.png);
}

Let’s take a look at the effect first:

Well, nothing to see. But in fact, the character has been masked.

Add some barrage to try out the effect.

Add bullet screen animation effects and styles

@keyframes barrage{
  from{
    left:100%;
    transform:translateX(0);
  }
  to{
    left:0;
    transform:translateX(-100%);
  }
}
.block{
  position:absolute;
  top: 50%;
  left: 100%;
  width: 100%;
  color: #fff;
}

Add js script for barrage

// Generate a random number from 0 to range const geneNumber = range => Math.floor(Math.random() * range)
    var barrages = [
      'Airdrop successful', 'Real smell warning', 'Friendly reminder, please turn up the volume ahead/put on headphones quickly', 'Bullet screen protection! Barrage of protection! Barrage of protection! ', 'All the above companies have gone bankrupt', 'High energy ahead', 'I have never seen such a shameless person', 'Congratulations on the end',
      'Airdrop successful', 'Real smell warning', 'Friendly reminder, please turn up the volume ahead/put on headphones quickly', 'Bullet screen protection! Barrage of protection! Barrage of protection! ', 'All the above companies have gone bankrupt', 'High energy ahead', 'I have never seen such a shameless person', 'Congratulations on the end',
      'Airdrop successful', 'Real smell warning', 'Friendly reminder, please turn up the volume ahead/put on headphones quickly', 'Bullet screen protection! Barrage of protection! Barrage of protection! ', 'All the above companies have gone bankrupt', 'High energy ahead', 'I have never seen such a shameless person', 'Congratulations on the end',
      'Airdrop successful', 'Real smell warning', 'Friendly reminder, please turn up the volume ahead/put on headphones quickly', 'Bullet screen protection! Barrage of protection! Barrage of protection! ', 'All the above companies have gone bankrupt', 'High energy ahead', 'I have never seen such a shameless person', 'Congratulations on the end',
      'Airdrop successful', 'Real smell warning', 'Friendly reminder, please turn up the volume ahead/put on headphones quickly', 'Bullet screen protection! Barrage of protection! Barrage of protection! ', 'All the above companies have gone bankrupt', 'High energy ahead', 'I have never seen such a shameless person', 'Congratulations on the end',
      'Airdrop successful', 'Real smell warning', 'Friendly reminder, please turn up the volume ahead/put on headphones quickly', 'Bullet screen protection! Barrage of protection! Barrage of protection! ', 'All the above companies have gone bankrupt', 'High energy ahead', 'I have never seen such a shameless person', 'Congratulations on the end',
      'Airdrop successful', 'Real smell warning', 'Friendly reminder, please turn up the volume ahead/put on headphones quickly', 'Bullet screen protection! Barrage of protection! Barrage of protection! ', 'All the above companies have gone bankrupt', 'High energy ahead', 'I have never seen such a shameless person', 'Congratulations on the end',
    ]
    const wrapper = document.querySelector('.barrage-wrapper')
    for (const item of barrages) {
      const block = document.createElement('div')
      block.classList.add('block')
      block.style.top = geneNumber(486) + 'px' // The position of the bullet message cannot exceed the height of the container block.style.animation = `barrage ${geneNumber(20)}s linear ${geneNumber(60)}s` // Random animation effect block.textContent = item
      wrapper.appendChild(block)
    }

Look at the effect again

Summarize

The above is the editor's introduction to the masked barrage function based on CSS3. I hope it will be helpful to everyone. If you have any questions, please leave me a message and I will reply to you in time!

<<:  Example of implementing GitHub's third-party authorization method in Vue

>>:  Solve the Docker x509 insecure registry problem

Recommend

Detailed explanation of several commands in Linux to obtain detailed hardware information

In Linux systems, especially server systems, it i...

How to restore data using binlog in mysql5.7

Step 1: Ensure that MySQL has binlog enabled show...

vue_drf implements SMS verification code

Table of contents 1. Demand 1. Demand 2. SDK para...

Detailed explanation of the basic usage of SSH's ssh-keygen command

SSH public key authentication is one of the SSH a...

Some issues we should pay attention to when designing a web page

Web design, according to personal preferences and ...

How to configure ssh/sftp and set permissions under Linux operating system

Compared with FTP, SSH-based sftp service has bet...

Vue Beginner's Guide: Environment Building and Getting Started

Table of contents Initial Vue Building a Vue deve...

Pure CSS to achieve hover image pop-out pop-up effect example code

Implementation principle The main graphics are co...

A brief analysis and sharing of the advantages and disadvantages of three tree structure table designs in MYSQL

Table of contents Introduction question Design 1:...

Some points on using standard HTML codes in web page creation

The most common mistake made by many website desi...

Detailed example of using CSS to beautify HTML form controls (form beautification)

1. Basic syntax structure of HTML submit and bott...

CSS code abbreviation div+css layout code abbreviation specification

Using abbreviations can help reduce the size of yo...

How to create a project with WeChat Mini Program using typescript

Create a project Create a project in WeChat Devel...

A brief discussion on the placement of script in HTML

I used to think that script could be placed anywh...

Knowledge about MySQL Memory storage engine

Knowledge points about Memory storage engine The ...