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

A small piece of HTML code will include the Baidu search bar in your page

<html> <head> <meta http-equiv=&quo...

Detailed explanation of script debugging mechanism in bash

Run the script in debug mode You can run the enti...

Ubuntu Basic Tutorial: apt-get Command

Preface The apt-get command is a package manageme...

Detailed explanation of CSS3 to achieve responsive accordion effect

I recently watched a video of a foreign guy using...

Detailed explanation of redis persistence, master-slave synchronization and sentinel under Linux

1.0 Redis persistence Redis is an in-memory datab...

Detailed explanation of replace into example in mysql

Detailed explanation of replace into example in m...

Using vue3 to imitate the side message prompt effect of Apple system

Table of contents Animation Preview Other UI Libr...

Let's talk in detail about the direction of slow SQL optimization in MySQL

Table of contents Preface SQL statement optimizat...

Setting the width of table cell td is invalid and the internal content always stretches it

When making a table page, sometimes the width set ...

VMware ESXi 6.0 and deployment of virtual machine installation tutorial (picture and text)

The company had a well-configured server that was...

How to modify the default network segment of Docker0 bridge in Docker

1. Background When the Docker service is started,...

Monitor changes in MySQL table content and enable MySQL binlog

Preface binlog is a binary log file, which record...

What are your principles for designing indexes? How to avoid index failure?

Table of contents Primary key index Create indexe...

Two solutions for Vue package upload server refresh 404 problem

1: nginx server solution, modify the .conf config...

Vue Element-ui table realizes tree structure table

This article shares the specific code of Element-...