Simple implementation of a hand-held bullet screen function + text jitter effects

Some time ago, there is a shaking shell screen on the sound of fire, so I decided to copy a, not much to say, see the effect……

Results show

The GIF looks a little blurry, but the actual effect is good.

If you don’t know what to do at first glance, let’s break down the functionality you want to implement.

  1. Create a black background that covers the entire screen, write the text, and center the content
  2. Seamless scrolling
  3. Realize text jitter effect
  4. Rotate 90 degrees (default landscape display)

The following code

.html


  <div class="barrage-box">
      <div class="text">Jitter subtitles</div>
  </div>
  
Copy the code

.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.5 s linear infinite;
   }

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

   /* Text scroll */
   @keyframes aniMove {
       0% { transform: translateX(100%); }
       100% { transform: translateX(-100%); }}/* Dither subtitles */
   @keyframes aniShake {
       0%.32% { text-shadow: 3px -3px 0px #FE008E, -5px 5px 0px #00FFFF; }
       33%.65% { text-shadow: 5px -5px 0px #FE008E, -3px 3px 0px #00FFFF; }
       66%.99% { text-shadow: 3px -3px 0px #00FFFF, -5px 5px 0px #FE008E; }
       100% { text-shadow: 5px -5px 0px #00FFFF, -3px 3px 0px #FE008E; }}Copy the code

At this point, a handheld bullet screen function with jitter and scrolling effects is realized.

The function is not complicated. At the beginning, I thought to draw it with canvas, but in the small program, the native component like Canvas has a higher level. If you want to switch effects and write a popover to modify the configuration, it is not easy to do. So the study with CSS3 write out, here I just want to say: “CSS3 cow beep –!!”

Applet more configuration effect preview

Recently I made a small program, hand-held bullet screen this function is also added, and achieved more functions, but also to share their configured content to friends, welcome you to scan code experience, support……

conclusion