This is the 20th day of my participation in the Novembermore Challenge.The final text challenge in 2021

introduce

I don’t know what was the first game you played when you were a child, but I played Mario anyway. It was really a carefree time, so in this issue, I will only use SCSS to complete a pixel text loading animation.

Nonsense not to say, we first look at the effect ~

The body of the

1. Show the text

<div id="app">
    <p class="loading">
        <span>l</span>
        <span>o</span>
        <span>a</span>
        <span>d</span>
        <span>i</span>
        <span>n</span>
        <span>g</span>
    </p>
</div>
Copy the code
@use "sass:math";
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P');

#app{
    width: 100%;
    height: 100vh;
    position: relative;
    background-color: # 000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading{
    font-family: 'Press Start 2P', sans-serif;
    font-size: # {100vw * 0.025};
    color: #ffffff;
    padding: 1.2 em;
    position: relative;
}
Copy the code

Here we introduce a pixel font and center the loading text in the middle of the screen.

If we want the text to be all uppercase and we don’t want to write JS, we can do that with CSS.

.loading{
    // ...
    text-transform: uppercase;
}
Copy the code

Text-transform to uppercase will make the text uppercase.

.loading{&::after{
        content: ' ';
        display: block;
        height: 2px;
        bottom: 0;
        left: 0;
        right: 0%;
        background-color: #ffffff;
        position: absolute; }}Copy the code

Then we use the pseudo-class to draw a thin white line under the text. Here we use the absolute position at the bottom, so that both left and right are 0. It is because we need the animation to be displayed from left to right and disappear from left to right again. Width is not enough for this, so we use left and right instead. Of course, we can also use mask and background to achieve the white line.

2. White line animation

$t: 3s;
.loading{&::after{
        animation: line $tease-in-out infinite; }}@keyframes line {
    0%{ right: 100%; left: 0%; opacity:.1; 50%} {right: 0%; left: 0%; opacity: 1; 100%} {left:100%; right:0%; opacity:.1; }}Copy the code

Let’s start by defining an animation time $t which is 3 seconds by default. The white line becomes longer from left to right and shorter from left to right, along with opacity. The principle is to use left and right as reference points and change another value to make a reference point longer and shorter.

3. Font animation

@use "sass:math";
$n: 7;
.loading{
     span{
        display: inline-block;
        animation-name: char;
        animation-duration: $t;
        animation-timing-function: ease-out;
        animation-iteration-count: infinite;
        animation-fill-mode: backwards;
        @for $i from 1 through $n{&:nth-child(#{$i}) {
                animation-delay: #{ math.div($i * $t * 0.25 , $n)}; }}}}@keyframes char {
    0% { transform: translateY(1.8 em); opacity: 0; Were 25% and 50%} {transform: none; opacity: 1; Were 75% and 100%} {transform: translateY(-1.8 em); opacity: 0;}
}
Copy the code

Define the current amount $n, since loading is split into seven words. We used SCSS traversal. We could see that all animation properties were the same except animation-delay, and remember that animation-fel-mode must be set to backwards, otherwise the first animation will be incoherent. Also note that the new version of SCSS introduces sass: Math, which is used to do division operations. Using the “/” symbol alone will cause errors during compilation.

Now, what this animation does, is basically move it up from the bottom, pause in the middle, and then go up again, because we have a different delay for each word, and it sends this wonderful sequential animation.


Ok, that’s it. It’s still very simple. I don’t know if you’ve lost it.

conclusion

This time we used a lot of SCSS methods to complete the case, as an SCSS exercise, you can learn why sass:math, how to traverse, how to do sequential animation effects, etc. What are you waiting for, let’s try it together