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