This content originally appeared on DEV Community and was authored by Techy Programmers
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
This content originally appeared on DEV Community and was authored by Techy Programmers
Techy Programmers | Sciencx (2021-06-09T11:46:38+00:00) ??How to make this amazing text animation.. Retrieved from https://www.scien.cx/2021/06/09/%f0%9f%94%a5%f0%9f%94%a5how-to-make-this-amazing-text-animation/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.