This is the 25th day of my participation in the More text Challenge. For more details, see more text Challenge

preface

Hello, everyone, it’s time for more literature in the dead of night! I work overtime on Friday, ready to start more text has already eleven o ‘clock, but more text daye can’t stop wow ~ do a thing no matter success or failure, the most important thing is the process, the most important is the persistence, isn’t it?

Today we’re going to use a special effect that allows multiple lines of text to be gradually filled with color.

The other day I wrote an article called Pure CSS Implementation: Effects that Gradually Fill Text with Color and had this comment:

1. Go to now. Why draw inferences from other cases?

It is obviously forbidden to realize the effect of newline, you ask me how to deal with more lines of text?

Think that year my hand take a watermelon knife, from the south heaven gate chop jade emperor palace, I say I kill not to blink an eye, you ask me eye stem stem?

Ok, today I will also solve the effect of filling in multiple lines of text

So let’s get started!

process

According to my original idea, JS dynamically determines how many lines there are, and then divides them according to the number of lines, and then applies the animation effect of text filling to each line. But today I thought, wouldn’t it be easier to cut out the text? The idea is as follows:

  • The two text layers need to overlap, which means the same style.
  • Extract the text from the bottom text box, traverse it, and usespanLabel the package and then add it to the top box every 0.3 seconds.
  • Add the animation that gradually fills the text tospanTag, so that when the current text animation is over, the next text is added and the animation starts again.

So I typed the following code:

    <style>
        .box{
            width: 888px;
            height: 300px;
            margin: 200px auto;
            position: relative;
        }
   
        p{
            position: absolute;
            top: 0;
            left: 0;
            font-size: 36px;
            font-weight: 600;
        }
        #text{
            color: # 666;
        }
        #copyText{
            color: rgb(253.145.145);
        }


        span {
            display: inline-block;
            white-space: nowrap;
            background: linear-gradient(to right, #ABDCFF.#0396FF);
            -webkit-background-clip: text;
            color: transparent;
            animation: landIn 1s linear;
        }

        @keyframes landIn {
            0% {
                width: 0;
            }
            100% {
                width: 1em; }}</style>

    <div class="box">
        <p id="text">Hello, I am the Antarctic ice ~ is currently an online gold digger senior touch fish division, proficient in touch fish, water, sit to sleep, flattery, brag, swing pot, quarrel and other front-end development necessary skills ~ pay attention to me, together to learn fun front-end knowledge!</p>
        <p id="copyText"></p>
    </div>

    <script>
        let text = document.querySelector("#text")
        let copyText = document.querySelector("#copyText")
        The textContent property sets or returns the textContent of the specified node, as well as all of its descendants.
        let letters = text.textContent.split("")
        console.log(letters)
        for (let i = 0; i < letters.length; i++) {
            let span = document.createElement("span")
            span.textContent = letters[i]
            setTimeout(() = > {
                copyText.append(span)
            }, 1000*i)
        }
    </script>
Copy the code

The running effect is as follows:

Doesn’t that seem to be a problem? In fact, when the right animation will appear no bottom text, only the upper text situation, although a flash, but also a problem:

Why is that? Because the width of the p tag is fixed, when the span tag changes from 0 to 1em, it does not know whether the remaining width can hold itself. When it finds that the remaining space cannot hold itself, it will wrap the line, and there is a flash.

How to solve this problem? I thought of both ends, so I added text-align: justify to the p tag; , I was glad to have solved this small problem, but the results were as follows:

This, this, this… The layout is all messed up. Hey!

This is because I’ve set the width of span to 1em, which is 36px. It doesn’t align with the p tag. So how do I do that?

It’s easy to apply the same width font to the p tag, and then the p tag will be full, even if it’s not text-align: justify; , also looks opposite to each other, and each character of the span tag overlaps perfectly.

However, the download of Chinese fonts of the same width will be charged, and I have not found a suitable font to verify. However, it is an extra way to achieve the effect of multiple lines of text being filled with color, after all, JS to get changes in the number of lines is not elegant ~

Afterword.

I hope what you have shared today is helpful to you. The effect of multiple lines of text being gradually filled with color can be used in the front page, introduction page and other attractive places. The implementation is not that difficult to achieve, such as this article with code, it only took about an hour to fix ~ speaking today’s more text is pretty smooth ~

Today is my twenty-fifth day of daily improvement, every day a little bit of output, a little bit of progress. Where there is a will, there is a way. Come on, everybody

If this has helped you, don’t keep it to yourself. Click like, follow big Ice, and learn more fun tech blogs with Big Ice

The list of more challenging articles is as follows:

  • Flex layout container elements and project elements attributes
  • 2021.06.02 how to play with CSS Gradient Background
  • How to Use SVG to create Text Effects along Arbitrary Paths
  • 2021.06.04 “Front-end code specification of 3 categories and 15 subcategories, let the team code be standardized!”
  • Git Commit Specification for team management: How many people don’t write commit records?
  • 2021.06.06 “How to Control CSS mouse Style and Expand mouse Click area | Weekend study”
  • 2021.06.07 “Pure CSS implementation: imitation gold mining account password login, the red panda wu eye action switch small Egg”
  • On Prototypes and Prototype Chains in 11 Aspects
  • A Closer Look at JavaScript scope and Scope Chains
  • What is a closure in JavaScript?
  • 2021.06.11 pure CSS Implementation: Cool Video Text Mask Effects
  • Apply a free API and use native JS to create typewriter-like vertical lines of text
  • Pure CSS implementation: Zebra stripes inside multi-line Text boxes
  • 2021.06.14 “Native JS implementation touch slide listening event”
  • 2021.06.15 “Native JS To achieve mouse wheel triggered page horizontal Scrolling”
  • 2021.06.16 “When the native JS realizes jump or refresh the page, the browser prompts that the current page is not saved”
  • 2021.06.17 “Three Basic Pop-ups of Native JS”
  • Pure CSS implementation: A button fixed at the bottom of the page
  • Pure CSS Implementation: Typewriter Animation for single lines of text
  • Pure CSS Implementation: How to Make a perfect parallelogram
  • 2021.06.21 “Talk about the JS based implementation preventing others from debugging the site through the console”
  • 2021.06.22 pure CSS Implementation: The Effect of Gradually Filling text with Color
  • H5 to achieve a scratch card animation effect
  • 2021.06.24 “Pure CSS implementation: Text newline underline, wavy lines and other effects”