PROWAREtech
CSS/JS: Landing Page with Water Ripples
A website landing page with a water ripple effect (requires one line of JavaScript).
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. Download JQuery Ripples Javascript FROM 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 type="text/javascript">
window.onload = function() { $(".hero").ripples(); };
</script>
</body>
</html>
Comment
