Simple implementation of handheld barrage function + text shaking special effects code based on JS

There was a shaking barrage on TikTok a while ago that was quite popular, so I decided to imitate it. Without further ado, let’s take a look at the effect first…

Effect display

The GIF image looks a bit blurry, but the actual effect is still good.

At first glance, I don’t know what to do, so let’s break down the functions to be implemented first.

1. Generate a full-screen black background, write text, and center the content
2. Achieving seamless scrolling
3. Realize text shaking effects
4. Rotate 90 degrees (horizontal display by default)

The code is as follows

.html

 <div class="barrage-box">
  <div class="text">Shaking subtitles</div>
 </div>

.css

.barrage-box {
  width: 100vh;
  height: 100vw;
  transform-origin: 50vw 50vw;
  transform: rotate(90deg);
  white-space: nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  overflow: hidden;
  animation: aniShake 0.5s linear infinite;
 }

 .text {
  width: 100%;
  font-size: 50px;
  color: #FFF;
  animation: aniMove 5s linear infinite;
  animation-fill-mode: forwards;
 }

 /* Text scrolling */
 @keyframes aniMove {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
 }
 
 /* Shaking subtitle effect*/
 @keyframes aniShake {
  0%, 33% { text-shadow: 3px -3px 0px #FE008E, -5px 5px 0px #00FFFF; }
  34%, 66% { text-shadow: 5px -5px 0px #FE008E, -3px 3px 0px #00FFFF; }
  67%, 100% { text-shadow: 3px -3px 0px #00FFFF, -5px 5px 0px #FE008E; }
 }

At this point, a handheld barrage function with shaking and scrolling effects has been realized.

The function is not complicated. At first, I thought about drawing it with canvas, but in the mini program, native components like canvas are at a relatively high level. If I want to switch special effects and write a pop-up window to modify the configuration, it is not easy. So I researched and wrote it in CSS3. I just want to say: "CSS3 is awesome!!!"

More configuration effect previews in the mini program

Recently, I made a small program, and added the handheld barrage function, and realized more functions. You can also share your configured content with friends. Welcome everyone to scan the code to experience it and support it...

Summary: This is my first time writing a blog. I spent the whole afternoon deleting and cutting. I am not very good at writing articles, but I still finished it. After all, people always have to learn to grow up on their own...

This is the end of this article about how to simply implement the handheld barrage function + text shaking special effects code based on JS. For more relevant js handheld barrage text shaking content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!