.jpg)
This Laser Write Animation is developed using HTML, CSS, JavaScript, Normalize CSS, and Splitting JS.
You can see the full code of this animation. And there is a video tutorial also.
- Normalize CSS is a modern, HTML5-ready alternative to CSS resets.
- Splitting JS creates elements and adds CSS variables to unlock amazing possibilities for animating text, grids, and more.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Laser Write Animation - DevXmart</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
/>
<link
rel="stylesheet"
href="https://unpkg.com/splitting@0.11.3/splitting.css"
/>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="title">
<span class="text write" data-splitting="lines">
WELCOME TO<br />
DEVXMART<br />
YOUTUBE CHANNEL
</span>
<span aria-hidden="true" class="text laser" data-splitting="lines">
WELCOME TO<br />
DEVXMART<br />
YOUTUBE CHANNEL
</span>
</div>
<script src="https://unpkg.com/splitting/dist/splitting.js"></script>
<script src="./script.js"></script>
</body>
</html>
CSS Code
html,
body {
background: hsl(220, 80%, 8%);
}
html {
height: 100%;
display: flex;
}
body {
margin: auto;
}
.title {
position: relative;
text-align: center;
transform: translateZ(0);
transform-style: preserve-3d;
}
.title .text {
font-family: sans-serif;
font-weight: 400;
font-size: calc(20vw / var(--word-total));
line-height: 1.0;
}
.title .write .word {
color: hsl(0, 0%, 80%);
text-shadow: 0 0 0.1em currentColor;
transform-style: preserve-3d;
-webkit-animation: write linear both;
animation: write linear both;
}
.title .laser {
position: absolute;
top: 0;
left: 0;
filter: blur(4px) contrast(10);
pointer-events: none;
}
.title .laser .word {
display: inline-block;
}
.title .laser .word {
color: hsl(0, 100%, 75%);
text-shadow: 0 0 0.1em currentColor;
transform: translateZ(5px);
-webkit-animation: laser linear both;
animation: laser linear both;
}
.title .write .word,
.title .laser .word {
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-delay: calc(0.3s + var(--word-index) * 160ms);
animation-delay: calc(0.3s + var(--word-index) * 160ms);
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.title:hover .word {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
@-webkit-keyframes write {
from,
30% {
-webkit-clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%);
clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%)
}
70%,
to {
-webkit-clip-path: polygon(-15% 0%, 120% 0%, 120% 100%, -15% 100%);
clip-path: polygon(-15% 0%, 120% 0%, 120% 100%, -15% 100%)
}
}
@keyframes write {
from,
30% {
-webkit-clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%);
clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%)
}
70%,
to {
-webkit-clip-path: polygon(-15% 0%, 120% 0%, 120% 100%, -15% 100%);
clip-path: polygon(-15% 0%, 120% 0%, 120% 100%, -15% 100%)
}
}
@-webkit-keyframes laser {
from,
30% {
-webkit-clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%);
clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%)
}
70%,
to {
-webkit-clip-path: polygon(115% 0%, 120% 0%, 120% 100%, 115% 100%);
clip-path: polygon(115% 0%, 120% 0%, 120% 100%, 115% 100%)
}
}
@keyframes laser {
from,
30% {
-webkit-clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%);
clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%)
}
70%,
to {
-webkit-clip-path: polygon(115% 0%, 120% 0%, 120% 100%, 115% 100%);
clip-path: polygon(115% 0%, 120% 0%, 120% 100%, 115% 100%)
}
}
JavaScript Code
Splitting();
.jpg&description=Laser Write Animation using HTML, CSS, JS, Normalize and Splitting){kind=link}