In this tutorial we will see how to make a Happy New Year 2022 Text Animation With HTML CSS JavaScript. Pure CSS and Vanilla JavaScript is used to make this css text animation effect.
Table of Contents
HTML Code
Take a look at the HTML code given below.
<p><span>H</span><span>a</span><span>p</span><span>p</span><span>y</span> <span>N</span><span>e</span><span>w</span> <span>Y</span><span>e</span><span>a</span><span>r</span></p>
CSS Code
CSS code is given below.
<style>
body
{
margin: 0;
padding: 0;
background-color: #000;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: 'Barlow Condensed' , sans-serif;
}
p
{
font-size: 120px;
font-weight: bold;
text-align: center;
color: #333;
}
span
{
cursor: pointer;
}
.animation
{
color: yellow;
text-shadow: 0 0 10px yellow, 0 0 25px yellow;
animation: glow 1.5s linear infinite;
}
@keyframes glow
{
0%
{
filter: hue-rotate(0deg);
}
100%
{
filter: hue-rotate(360deg);
}
}
</style>
JavaScript Code
Take a look at the JavaScript Code given below.
<script>
var elem = document.getElementsByTagName('span');
for(var i =0; i < elem.length; i++)
{
elem[i].addEventListener('click' , function(){
if(this.classList.contains('animation'))
{
this.classList.remove('animation');
}
else
{
this.classList.add('animation');
}
});
}
</script>
Demo
Video Tutorial
Watch our video tutorial on Happy New Year 2022 Text Animation With HTML CSS JavaScript.