JavaScript – How to get a typewriter effect on a website.

I made a grid, and in the 6 grid boxes I wanted to have a blurry image that would be clear on the hover, which I thought was easy and had to type text next to it with a typewriter effect. Here is some code I found on a typewriter effect. But I don’t think I can make it work. The cursor line is very large and spreads over the entire paragraph and it passes through the text really slowly.

I understand what this code does a bit, I was hoping to learn something from it, but if I can’t make it work, there’s nothing to learn. Alternatively, with the limited coding knowledge I have, I thought of creating a c ++ loop, since in c ++ the text is considered an array of characters. So a function that will loop the text, add a letter and then “|” Write, delete, write, delete. Symbol after each new element, but I do not know how to add it to the website.

HTML

<div id="box_1">
    <img id="box_1_img" src="/images/artmainpage/pic1.jpg" alt="Image cannot be displayed">
    <span id="box_1_para">
        <div class="text_hide"></div>
        <div class="text1">Cras egestas porttitor ante, ut iaculis nulla facilisis sit amet. Pellentesque tristique erat est, eget consectetur nunc pulvinar vel. Aliquam vel lorem et massa auctor dictum vitae at tellus. Suspendisse potenti.</div>
        <div class="text_cursor"></div>
    </span>
</div>

CSS

#box_1
{
    grid-area: b;
    border: 1px dotted red;
    margin: 2px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

    #box_1_img
    {
        margin-left: 10px;
        height: 80%;
        filter: blur(1px);
        background: (255,255,255,0.1);
        backdrop-filter: blur(6px);
        transition: all .5s ease-in-out;
    }
        #box_1_img:hover
        {
            margin-left: 10px;
            height: 90%;
            transition: all .5s ease-in-out;
            filter: blur(0px);
        }

        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

    #box_1_para
    {
        margin-left: 10px;
        margin-right: 10px;
        font-family: 'Courier New', Courier, monospace;
        font-size: small;
        position: relative;
    }
.text_hide{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: white;
    }
    
    .text_cursor{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: transparent;
        border-left: 3px solid black;
    }

JS

function typing_animation() {
    let text_element = document.querySelector(".text1");
    let text_array = text_element.innerHTML.split("");
    let text_array_slice = text_element.innerHTML.split(" ");
    let text_len = text_array.length;

    const word_len = text_array_slice.map((word) => {
        return word.length;
    })

    console.log(word_len);

    let timings = {
        easing: `steps(${Number(word_len[0] + 1)}, end)`,
        delay: 1000,
        duration: 1000,
        fill: 'forwards'
    }

    let cursor_timings = {
        duration: 700,
        iterations: Infinity,
        easing: 'cubic-bezier(0,.26,.44,.93)'
    }

    document.querySelector(".text_cursor").animate([
        {
            opacity: 0
        },
        {
            opacity: 0, offset: 0.7
        },
        {
            opacity: 1
        }
    ], cursor_timings);

    if (text_array_slice.length == 1) {
        timings.easing = `steps(${Number(word_len[0])}, end)`;

        let reveal_animation = document.querySelector(".text_hide").animate([
            { left: '0%' },
            { left: `${(100 / text_len) * (word_len[0])}%` }
        ], timings);

        document.querySelector(".text_cursor").animate([
            { left: '0%' },
            { left: `${(100 / text_len) * (word_len[0])}%` }
        ], timings);

        reveal_animation.onfinish = () => {
            setTimeout(() => {
                document.querySelector('.text_hide').animate([
                    {left: '0%'}
                ], {
                    duration: 2000,
                    easing: 'cubic-bezier(.73,0,.38,.88)'
                });
                document.querySelector('.text_cursor').animate([
                    {left: '0%'}
                ], {
                    duration: 2000,
                    easing: 'cubic-bezier(.73,0,.38,.88)'
                });
                typing_animation();
            }, 1000);
        }
    } else {
        document.querySelector(".text_hide").animate([
            { left: '0%' },
            { left: `${(100 / text_len) * (word_len[0] + 1)}%` }
        ], timings);

        document.querySelector(".text_cursor").animate([
            { left: '0%' },
            { left: `${(100 / text_len) * (word_len[0] + 1)}%` }
        ], timings);
    }


    for (let i = 1; i < text_array_slice.length; i++) {
        console.log(word_len);
        console.log(text_array_slice.length);
        const single_word_len = word_len[i];
        console.log(single_word_len);

        if (i == 1) {
            var left_instance = (100 / text_len) * (word_len[i - 1] + 1);
            console.log(left_instance);
        }

        let timings_2 = {
            easing: `steps(${Number(single_word_len + 1)}, end)`,
            delay: (2 * (i + 1) + (2 * i)) * (1000),
            // delay: ((i*2)-1)*1000,
            duration: 2000,
            fill: 'forwards'
        }

        if (i == (text_array_slice.length - 1)) {
            timings_2.easing = `steps(${Number(single_word_len)}, end)`;
            let reveal_animation = document.querySelector(".text_hide").animate([
                { left: `${left_instance}%` },
                { left: `${left_instance + ((100 / text_len) * (word_len[i]))}%` }
            ], timings_2);

            document.querySelector(".text_cursor").animate([
                { left: `${left_instance}%` },
                { left: `${left_instance + ((100 / text_len) * (word_len[i]))}%` }
            ], timings_2);

            reveal_animation.onfinish = () => {
                setTimeout(() => {
                    document.querySelector('.text_hide').animate([
                        {left: '0%'}
                    ], {
                        duration: 2000,
                        easing: 'cubic-bezier(.73,0,.38,.88)'
                    });
                    document.querySelector('.text_cursor').animate([
                        {left: '0%'}
                    ], {
                        duration: 2000,
                        easing: 'cubic-bezier(.73,0,.38,.88)'
                    });
                    typing_animation();
                }, 1000);
            }
        } else {
            document.querySelector(".text_hide").animate([
                { left: `${left_instance}%` },
                { left: `${left_instance + ((100 / text_len) * (word_len[i] + 1))}%` }
            ], timings_2);

            document.querySelector(".text_cursor").animate([
                { left: `${left_instance}%` },
                { left: `${left_instance + ((100 / text_len) * (word_len[i] + 1))}%` }
            ], timings_2);
        }

        left_instance = left_instance + ((100 / text_len) * (word_len[i] + 1));
    }
}
typing_animation();

Write a Comment