DEV Community

loading...
Cover image for You have never seen this text animation before

You have never seen this text animation before

kunaal438 profile image Techy Programmers ใƒป2 min read

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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

Discussion (2)

Collapse
chrisgreening profile image
Chris Greening

Hey Kunaal, impressive work!! Keep it up ๐Ÿ˜„

Some comments have been hidden by the post's author - find out more

Forem Open with the Forem app