Smoke Effect using HTML, CSS and JS
⚡ Unique DevLOVEper
Awesome Smoke Effect | Developed using HTML, CSS, and JS|
you can view the code for this project below...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Smoke effect</title>
</head>
<body>
<section>
<h1 class="text">UNIQUE DEVLOVEPER STUDIOS ❤️</h1>
</section>
</body>
</html>
CSS
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Algerian;
}
section{
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #111;
overflow: hidden;
}
section .text{
position: relative;
color: #fff;
margin: 40px;
max-width: 800px;
user-select: none;
font-size: 3.2em;
}
section .text span{
position: relative;
display: inline-block;
cursor: pointer;
}
section .text span.active{
animation: smoke 2s linear forwards;
transform-origin: bottom;
}
@keyframes smoke
{
0%
{
opacity: 1;
filter: blur(0);
transform: translateX(0) translateY(0) rotate(0deg) scale(1);
}
50%
{
opacity: 1;
pointer-events: none;
}
100%
{
opacity: 0;
filter: blur(20px);
transform: translateX(300px) translateY(-300px) rotate(720deg) scale(4);
}
}
JS
const text = document.querySelector('.text');
text.innerHTML = text.textContent.replace(/\S/g,"<span>$&</span>");
const letters = document.querySelectorAll('span');
for (let i=0; i<letters.length; i++){
letters[i].addEventListener("mouseover", function(){
letters[i].classList.add('active')
})
}
Comments
Post a Comment