Simple implementation of a handheld barrage function + text jitter effects
Some time ago, there was a jitter barrage on Douyin that was quite hot, so I decided to imitate one, not much to say, first look at the effect...
Show results
The GIF image looks a bit fuzzy, but the actual effect is still good.
At first glance, you don't know what to do, so let's disassemble the function to be implemented.
- Generate a full-screen black background, write text, and then center the content
- Achieve seamless scrolling
- Realize text jitter effects
- Rotate 90 degrees (default horizontal screen display)
code show as below
.html
<div class="barrage-box">
<div class="text">抖动字幕</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;
}
/* 文字滚动 */
@keyframes aniMove {
0% {
transform: translateX(100%); }
100% {
transform: translateX(-100%); }
}
/* 抖动字幕效果 */
@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; }
}
At this point, a hand-held barrage function including jitter and scroll effects has been realized.
The function is not complicated. At first I wanted to draw with canvas, but in the small program, the level of native components such as canvas is relatively high. If you want to switch special effects and write a pop-up window to modify the configuration, it is not easy to handle. So I studied it and wrote it in css3. Here I just want to say: "css3 beep————!!!"
Preview of more configuration effects in the applet
Recently I made a small program and added the function of handheld barrage, and realized more functions. You can also share the content you have configured with your friends. Welcome everyone to scan the code to experience, support...
