Introduction of Animated Hero Section
Hello! Everyone, today we are going to present you our new project that is “Animated Hero Section” with animation. Which is made with HTML, CSS, and React. In this project there will be the name of the website. That name will glow with some animation continuously, and below it a greeting sentence written there. Then you will see a button containing a link, which will take you to the main website. The background will be so beautiful and amazing. You will see the animated background in which some colorful dots will move from bottom to top, and their opacity will also decrease when they’ll go from bottom to top.
Let’s start making this Hero Section Template HTML Css by doing the simple and easy code of HTML (Hyper Text Markup Language), CSS (Cascading Style Sheet), and Tailwind CSS. We have used here the basics of code concept as everyone can understand it, a fresher or an experienced guy. I hope this project is going to be so helpful for you, as you can use it in your hero section of the website for the welcome of users. If you have any doubt, then you can contact us through the details given in the footer of any page. Now let’s start together without wasting any time on this project.
HTML (Hyper Text Markup Language)
First we will make the structure of this Hero Section Code with the help of HTML (Hyper Text Markup Language is used to make the structure of the web page of any website). In this, we will give the heading of the project in the title tag (which is used to give the title of any topic), and then we will move toward the main body. We will make a div for particle and then a parent div for content of page.
In this we will give the name of the website in the h1 tag (which is used to give the heading of any topic). Then we will write a paragraph of greeting for the users in the p tag. (which is used to write some paragraph about any heading), and at the end we will insert the button in the button tag. (which is used to add the button to the page for some actions). In this button we will insert the link to the website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Extreme Hero Section</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@keyframes neon-pulse {
0%, 100% { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #00ffff, 0 0 35px #00ffff, 0 0 40px #00ffff, 0 0 50px #00ffff, 0 0 75px #00ffff; }
50% { text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 7px #fff, 0 0 10px #00ffff, 0 0 17px #00ffff, 0 0 20px #00ffff, 0 0 25px #00ffff, 0 0 37px #00ffff; }
}
.neon-text {
animation: neon-pulse 1.5s infinite alternate;
}
.bg-animated {
background: linear-gradient(-45deg, #000000, #1a1a1a, #000033, #003366);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
@keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.glitch {
position: relative;
}
.glitch::before,
.glitch::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.glitch::before {
left: 2px;
text-shadow: -2px 0 #ff00de;
clip: rect(24px, 550px, 90px, 0);
animation: glitch-anim 3s infinite linear alternate-reverse;
}
.glitch::after {
left: -2px;
text-shadow: -2px 0 #00ffff;
clip: rect(85px, 550px, 140px, 0);
animation: glitch-anim 2s infinite linear alternate-reverse;
}
@keyframes glitch-anim {
0% { clip: rect(39px, 9999px, 71px, 0); }
5% { clip: rect(76px, 9999px, 53px, 0); }
10% { clip: rect(42px, 9999px, 16px, 0); }
15% { clip: rect(94px, 9999px, 33px, 0); }
20% { clip: rect(3px, 9999px, 5px, 0); }
25% { clip: rect(21px, 9999px, 100px, 0); }
30% { clip: rect(79px, 9999px, 82px, 0); }
35% { clip: rect(56px, 9999px, 18px, 0); }
40% { clip: rect(6px, 9999px, 38px, 0); }
45% { clip: rect(65px, 9999px, 91px, 0); }
50% { clip: rect(31px, 9999px, 56px, 0); }
55% { clip: rect(88px, 9999px, 71px, 0); }
60% { clip: rect(13px, 9999px, 43px, 0); }
65% { clip: rect(50px, 9999px, 9px, 0); }
70% { clip: rect(27px, 9999px, 68px, 0); }
75% { clip: rect(85px, 9999px, 25px, 0); }
80% { clip: rect(44px, 9999px, 93px, 0); }
85% { clip: rect(19px, 9999px, 39px, 0); }
90% { clip: rect(71px, 9999px, 86px, 0); }
95% { clip: rect(2px, 9999px, 62px, 0); }
100% { clip: rect(54px, 9999px, 47px, 0); }
}
.hover-3d {
transition: transform 0.3s;
}
.hover-3d:hover {
transform: perspective(1000px) rotateX(10deg) rotateY(-10deg) rotateZ(2deg);
}
.particle {
position: absolute;
border-radius: 50%;
}
@keyframes float-up {
to {
transform: translateY(-100vh) rotate(360deg);
opacity: 0;
}
}
</style>
</head>
<body class="bg-animated min-h-screen flex items-center justify-center p-4 overflow-hidden">
<div id="particles"></div>
<div class="text-center z-10">
<h1 class="text-6xl font-bold mb-4 text-white neon-text glitch hover-3d" data-text="Layakcoder">Layakcoder</h1>
<p class="text-xl text-cyan-300 mb-8">Welcome to our website!</p>
<button class="bg-gradient-to-r from-cyan-500 to-blue-500 text-white font-bold py-3 px-8 rounded-full hover:from-cyan-600 hover:to-blue-600 transition-all duration-300 hover:scale-110 inline-block">
<i class="fas fa-rocket mr-2"></i>Visit Layakcoder.com
</button>
</div>
<script>
function createParticle() {
const particle = document.createElement('div');
particle.classList.add('particle');
const size = Math.random() * 5 + 2;
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
const x = Math.random() * window.innerWidth;
const y = window.innerHeight;
particle.style.left = `${x}px`;
particle.style.top = `${y}px`;
const hue = Math.random() * 360;
particle.style.backgroundColor = `hsl(${hue}, 100%, 50%)`;
const duration = Math.random() * 3 + 2;
particle.style.animation = `float-up ${duration}s linear`;
document.getElementById('particles').appendChild(particle);
setTimeout(() => {
particle.remove();
}, duration * 1000);
}
setInterval(createParticle, 50);
</script>
</body>
</html>CSS (Cascading Style Sheet)
After making the structure of this Hero Section Template HTML Css, we will give it some styling and animation with the help of CSS. (Cascading Style Sheet is used to give the styling and animation to the page and to make it responsive). In this, we will use it only for animation, and the rest of the design will be done from Tailwind. In this, we will use @keyframe (tthis is the framework of CSS used to give animation to the web page). Which we will add some styling of CSS and timing, the properties will change according to time. This will continue till the user is active on the web page. We will insert all the properties in “@keyframe name of animation”. Then paste this name in class or id name of div of animation in CSS styling.
<style>
@keyframes neon-pulse {
0%, 100% { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #00ffff, 0 0 35px #00ffff, 0 0 40px #00ffff, 0 0 50px #00ffff, 0 0 75px #00ffff; }
50% { text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 7px #fff, 0 0 10px #00ffff, 0 0 17px #00ffff, 0 0 20px #00ffff, 0 0 25px #00ffff, 0 0 37px #00ffff; }
}
.neon-text {
animation: neon-pulse 1.5s infinite alternate;
}
.bg-animated {
background: linear-gradient(-45deg, #000000, #1a1a1a, #000033, #003366);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
@keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.glitch {
position: relative;
}
.glitch::before,
.glitch::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.glitch::before {
left: 2px;
text-shadow: -2px 0 #ff00de;
clip: rect(24px, 550px, 90px, 0);
animation: glitch-anim 3s infinite linear alternate-reverse;
}
.glitch::after {
left: -2px;
text-shadow: -2px 0 #00ffff;
clip: rect(85px, 550px, 140px, 0);
animation: glitch-anim 2s infinite linear alternate-reverse;
}
@keyframes glitch-anim {
0% { clip: rect(39px, 9999px, 71px, 0); }
5% { clip: rect(76px, 9999px, 53px, 0); }
10% { clip: rect(42px, 9999px, 16px, 0); }
15% { clip: rect(94px, 9999px, 33px, 0); }
20% { clip: rect(3px, 9999px, 5px, 0); }
25% { clip: rect(21px, 9999px, 100px, 0); }
30% { clip: rect(79px, 9999px, 82px, 0); }
35% { clip: rect(56px, 9999px, 18px, 0); }
40% { clip: rect(6px, 9999px, 38px, 0); }
45% { clip: rect(65px, 9999px, 91px, 0); }
50% { clip: rect(31px, 9999px, 56px, 0); }
55% { clip: rect(88px, 9999px, 71px, 0); }
60% { clip: rect(13px, 9999px, 43px, 0); }
65% { clip: rect(50px, 9999px, 9px, 0); }
70% { clip: rect(27px, 9999px, 68px, 0); }
75% { clip: rect(85px, 9999px, 25px, 0); }
80% { clip: rect(44px, 9999px, 93px, 0); }
85% { clip: rect(19px, 9999px, 39px, 0); }
90% { clip: rect(71px, 9999px, 86px, 0); }
95% { clip: rect(2px, 9999px, 62px, 0); }
100% { clip: rect(54px, 9999px, 47px, 0); }
}
.hover-3d {
transition: transform 0.3s;
}
.hover-3d:hover {
transform: perspective(1000px) rotateX(10deg) rotateY(-10deg) rotateZ(2deg);
}
.particle {
position: absolute;
border-radius: 50%;
}
@keyframes float-up {
to {
transform: translateY(-100vh) rotate(360deg);
opacity: 0;
}
}
</style>Tailwind CSS
We are using the tailwind CSS for the styling of Hero Section Design Html Css because it makes it easy to implement the CSS properties. We do not need to make another file for this, and it is easier to make it responsive than CSS. In this, we will apply styling properties to the html tags, like taking the whole content to the center of the screen. Then designing the interior elements. We will set the position and size of the name of the website, paragraph, and button. Also give the styling like color, size, font, and other properties. As you can see in the code of Tailwind, and the most important part is to make it responsive. Which can be done just by applying almost the same properties for tablet and desktop. The size for desktop is “SM” and for tablet is “MD”.
Output of Animated Hero Section
Now finally we have made this Animated Hero Section using the simple and easy code of HTML, CSS, and Tailwind by following their code step by step without any problem. I hope this project is helpful for you, as you can make such a project for your practice. That will increase your knowledge, or you can add this template to your website if you have it. If you want to download the source code, then click on the button given below to download Responsive Hero Section Html Css.
For more explanation, click on the link given below to watch the full video of Hero Section Code.
You can also check:
