You have never seen this text animation before

#html #css #beginners #webdev

Hello, glad you are here. I am kunaal and today we will see how to make an awesome text animation which you have never seen before. You can see demo below.

Demo

Video Tutorial -

For better explanation. You can watch video tutorial.

If you like the video tutorial. Please consider subscribing my youtube channel.

Let's code

Inside HTML file under <body> tag write

<h1 class="text"></h1>
<script src="https://cdn.jsdelivr.net/npm/glitched-writer/lib/index.min.js"></script>

CSS

@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@700&display=swap');

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

body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'dosis', sans-serif;
    background: rgb(27, 27, 27);
}

.text{
    text-transform: capitalize;
    font-size: 100px;
    -webkit-text-stroke: 1px #fff;
    color: transparent;
    text-shadow: -3px -2px #fff;
    text-align: center;
}

And Js

const text = document.querySelector('.text');

const writer = GlitchedWriter.create(text);

let phrases = [
    "hello",
    "welcome to my channel",
    "techy programmers",
    "today we will make this effect",
    "with glitch writer JS library",
    "so without wating time",
    "let's get started"
];

writer.queueWrite(phrases, 2000, false);

I hope you understood everything. If you have any doubt or you find any mistake that I made or you have any suggestion feel free to ask me in comment.

If you are interested in programming and want to know how I a 15yr old teen do coding make these design. You can follow me on my Instagram. I am also planning to post my game development stuff on Instagram.

Source Code, My youtube Channel, Instagram