In this detailed analysis, we’ll dissect a fascinating animated design created using CSS and HTML. Let’s dive into the intricacies of the code to understand how this captivating animation is achieved.
HAML Structure:
The HTML structure consists of a loop that generates multiple <span> elements containing the letters “LOADING.” These elements are wrapped inside a container with the class .wrap.
-2.times do
.wrap
%span L
%span O
%span A
%span D
%span I
%span N
%span GSCSS Styling:
The CSS styles play a crucial role in shaping the visual appearance and animation of the design. Here’s a breakdown of the key CSS components:
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");
body {
display: grid;
place-items: center;
height: 100vh;
overflow: hidden;
position: relative;
width: 100vw;
background: #1e1f24;
&:before,
&:after {
border-radius: 20px 20px 0 0;
content: "";
position: absolute;
width: 100vw;
background: radial-gradient(
circle at center,
#58c9ea 1px,
transparent 1px,
transparent 10px
)
50% 50% / 20px 20px,
radial-gradient(
circle at center,
#58c9ea 1px,
transparent 1px,
transparent 10px
)
calc(50% + 10px) calc(50% + 10px) / 20px 20px;
height: calc(50vh - 10px);
box-shadow: inset 0 0 0 1px #f84c04;
left: 0;
top: calc(50% + 22.5px);
animation: scroll 2s linear infinite -1.5s;
@keyframes scroll {
to {
transform: translateX(-200vw);
}
}
}
&:after {
width: 150vw;
left: 150vw;
}
.wrap {
width: 400px;
height: 400px;
text-align: center;
position: absolute;
transform-origin: 100% 0%;
top: calc(50% - 200px);
left: calc(50% - 400px);
font-family: "JetBrains Mono";
font-size: 50px;
animation: wobble 2s linear infinite;
&:nth-of-type(2) {
animation-delay: -0.05s;
z-index: -1;
span {
color: #1e1f24;
animation: run2 2s ease-in-out infinite;
\-webkit-text-stroke: 2px #bb9c30;
}
}
@keyframes wobble {
0%,
20%,
40%,
50%,
80%,
100% {
transform: rotate(-5deg);
}
10%,
30%,
90% {
transform: rotate(5deg);
}
70% {
transform: rotate(0deg) scaleY(0.8) scaleX(1.1);
}
}
span {
color: #ebe9dc;
position: absolute;
offset-path: path("M 140 200 C 100 80 300 80 260 200 ");
animation: run 2s ease-in-out infinite;
@keyframes run2 {
0%,
20%,
40%,
80%,
100% {
offset-path: path("M 140 200 C 100 80 300 80 260 200 ");
}
10%,
30%,
90% {
offset-path: path("M 50 200 C 100 80 300 80 350 200 ");
}
50%,
60%,
70% {
offset-path: path("M 0 70 C 160 70 260 70 400 70 ");
}
}
@keyframes run {
0%,
23.5%,
43.5%,
83.5%,
100% {
offset-path: path("M 140 200 C 100 80 300 80 260 200 ");
}
13.5%,
33.5%,
93.5% {
offset-path: path("M 50 200 C 100 80 300 80 350 200 ");
}
50%,
60%,
70% {
offset-path: path("M 0 70 C 160 70 260 70 400 70 ");
}
}
@for $i from 1 through 7 {
&:nth-of-type(#{$i}) {
offset-distance: calc(#{($i - 1) * (100 / 6)} * 1%);
}
}
}
}
}- Global Styles: Resets default browser styles, sets background color, and defines font family.
- Container Styles: Styles the main container with dimensions, position, font family, and animation properties.
- Animation Effects: Utilizes keyframes to create wobbling and running animations for the text elements.
- Gradient Background: Creates a dynamic gradient background using radial gradients to simulate a loading effect.
- Text Styling: Sets colors, offset paths, and animation properties for individual text elements.
Animation Effects:
- Wobble Animation: The
.wrapcontainer undergoes a wobbling animation using keyframes, creating a dynamic visual effect. - Running Animation: Each letter in the word “LOADING” follows a customized path animation, simulating a running motion.
Conclusion:
In conclusion, this unique animated design showcases the creative possibilities of CSS and HTML in creating visually appealing and dynamic web elements. By leveraging CSS animations and HTML structure, developers can craft engaging user experiences that captivate and delight visitors. Whether you’re a beginner or an experienced developer, studying and experimenting with such designs can enhance your skills and inspire innovative web projects.
Happy Coding!
