Homepage with Wavy Background Animation

Hello Friends, In this blog, I am sharing another snippet on Homepage With Wavy Background Animation. In the web design or website design process, homepage design is an important segment. In this snippet, we are going to create a simple-looking Homepage with a CSS animated background. In this blog, I have shared many projects on CSS animation examples, HTML CSS, JavaScript, Bootstrap, etc. Please make sure to check those apart from this snippet. For this project, I will recommend you to follow the below tutorial from start to finish.

I hope you have watched the whole video and got some idea about the snippet. In this website homepage design, there is a navbar where the logo will be at the center. I didn't make the snippet responsive as I intended to show the animated background CSS. You can make it responsive by applying CSS media queries. After that, there will be some banner text elements in the middle of the homepage with a call-to-action button. To make the website design ideas even more interesting, I have used CSS keyframes animation to create a wavy background animation.

You may like this:

To make the snippet, I have taken a div named wrapper. In the wrapper div, I have taken a ul element with li for creating the navbar. Underneath the navbar, I have taken another div called 'banner' and put the banner text elements like a header text, a paragraph, and a button. Then comes the 'box' div where I set a background image (1920x219) using inline CSS and, this image will be used to make our wavy background animation. You can make different types of wavy images using adobe photoshop and use that here. After that, I used some basic CSS styling and CSS animation to get the effect we required.

Homepage with Wavy Background Animation [ Source Code ]:

To make this project, you have to create an HTML file with a .html extension and a CSS file with a .css extension. After that, link the external CSS file to the HTML file. Please copy the code below and paste it into your project and save it. Play around with the code to make it more interesting.

ADD HTML

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
	<meta charset="UTF-8">
	<title>Simple Homepage With Wavy Background Animation</title>
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="wrapper">
		<ul>
			<li>
				<a href="#">Home</a>
			</li>
			<li>
				<a href="#">About</a>
			</li>
			<li>
				<a href="#">Portfolio</a>
			</li>
			<li class="logo">company logo</li>
			<li>
				<a href="#">Services</a>
			</li>
			<li>
				<a href="#">Blog</a>
			</li>
			<li>
				<a href="#">Contact</a>
			</li>
		</ul>
		<div class="banner">
			<h2>banner Text</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta reiciendis totam harum, dolores expedita officiis.</p><a href="#">Learn More</a>
		</div>
		<div class="box">
			<div class="single-box" style="background-image: url('https://i.postimg.cc/vHXWB9DN/1.png')"></div>
		</div>
	</div>
</body>
</html>

ADD CSS:

* {
	font-family: montserrat;
}
.wrapper {
	overflow: hidden;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto;
}
.box {
	position: absolute;
	width: 100%;
	overflow: hidden;
	height: 100%;
	bottom: -1px;
	background: linear-gradient(to bottom, #ee0979, #ff6a00);
	z-index: 5;
}
ul {
	z-index: 99;
	list-style: none;
	text-align: center;
	position: fixed;
	margin: auto;
	width: 95%;
}
ul li {
	display: inline-block;
	margin: 15px;
}
ul li a {
	text-decoration: none;
	color: #fff;
	text-transform: uppercase;
	font-size: 20px;
}
.logo {
	font-size: 25px;
	text-transform: uppercase;
	font-weight: 900;
	color: #fff;
}
.banner {
	position: absolute;
	z-index: 99;
	top: 20%;
	left: 50%;
	transform: translate(-50%, 50%);
	text-align: center;
}
.banner h2 {
	color: #fff;
	font-size: 50px;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin: 0;
}
.banner p {
	color: #fff;
	font-size: 18px;
	line-height: 1.9;
}
.banner a {
	text-decoration: none;
	background: #000;
	color: #fff;
	padding: 10px 30px;
	display: inline-block;
}
.single-box {
	position: absolute;
	left: 0;
	width: 200%;
	height: 100%;
	background-repeat: repeat no-repeat;
	background-position: 0 bottom;
	transform-origin: center bottom;
	background-size: 50% 80px;
	animation: animate 18s linear infinite;
}
@keyframes animate {
	0% {
		transform: translateX(0) translateZ(0) scaleY(1);
	}
	50% {
		transform: translateX(-25%) translateZ(0) scaleY(0.55)
	}
	100% {
		transform: translateX(-50%) translateZ(0) scaleY(1)
	}
}

I hope you have successfully implemented the code. If you like this snippet, then please consider subscribing to this channel and press the bell icon for future video notification. Please share the articles of this blog and follow us on our social media profiles to stay connected with this blog for more free source code. Thank you for stopping by this blog.

1 Comments

Post a Comment

About Us

Contact Form

Homepage with Wavy Background Animation

You might like

1 Comments

Post a Comment

Contact Form