PROWARE technologies
PROWARE technologies

Responsive, Animated Website Landing Page How To

This article shows how to create a responsive landing page like this:

After the animation, the page looks like this:

CSS "@keyframes" are required for the animation and JQuery is required for the water-ripple effect. Because JQuery Ripples Javascript is experimental as of this writing, its files may not be available on the Internet; DOWNLOAD IT HERE.

This code is compatible with Internet Explorer 11 and newer including Safari, Chrome and Firefox. It also is compatible with mobile devices (responsive code).

Note: the CSS and HTML are including in one file for simplicity's sake. After downloading this file, it is recommended the CSS and HTML be separated into separate files.

Experiment with the animation- properties for different effects.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.5.3/jquery.ripples.min.js"></script>
	<title>Home Page</title>
	<style>
		*, *::before, *::after {
			box-sizing: border-box;
		}
		@keyframes foot {
			0% { bottom: 0; top: 100vh; }
			100% { bottom: 0; top: 33.333333vh; }
		}
		@keyframes footdiv {
			0% { left: -100vw; }
			100% { left: 0; }
		}
		body {
			margin: 0;
			padding: 0;
			position: relative;
			overflow: hidden;
			font-family: sans-serif;
		}
		.hero {
			position: absolute;
			top: 0;
			width: 100vw;
			height: 100vh;
			background-color: #223;
			background-image: url(https://picsum.photos/id/1019/3840/2160);
			background-attachment: fixed;
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
		}
		.hero h1 {
			padding-top: 10vh;
			text-align: center;
			font-size: 5vh;
		}
		.hero a {
			color: #333;
			text-decoration: none;
			outline: none;
		}
		.foot p {
			color: #eee;
			text-align: justify;
			padding: 0 50px;
			font-size: 2vh;
			max-width: 25vw;
		}
		.foot a {
			display: block;
			width: auto;
			color: #eee;
			text-decoration: none;
			font-size: 3vh;
			padding: 1.1vh 2vw 1vh 2vw;
			text-transform: uppercase;
			border: 2px solid #eee;
			outline: none;
		}
		.foot a:hover, .foot a:focus {
			color: #333;
			background-color: #eee;
		}
		.foot {
			position: relative;
			background-color: #333;
			width: 100vw;
			height: 66.666667vh;
			top: 100vh;
			bottom: 0;
			animation: foot;
			animation-duration: 1s;
			animation-delay: 2s;
			animation-fill-mode: forwards;
			z-index: 2;
		}
		.foot div {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			width: 100vw;
			height: 100%;
			left: -100vw;
			animation: footdiv;
			animation-duration: 1s;
			animation-delay: 3s;
			animation-fill-mode: forwards;
		}
	</style>
</head>
<body>
	<div class="hero">
		<h1><a href="#">JOHN'S SURF SHOP</a></h1>
	</div>
	<div class="foot">
		<div>
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
			<a href="#">READ MORE</a>
		</div>
	</div>
	<script>
		window.onload = function() {
			$(".hero").ripples();
		};
	</script>
</body>
</html>

Coding Video

https://youtu.be/mJAjX-jFqyU