Table of Contents
Looking to add a cool, dynamic footer to your website? In this post, we’ll walk you through how to create a wave animation effect using just HTML and CSS! This footer is perfect for websites that want to add some fluid motion and smooth transitions to their design.
What We’ll Build:
We’ll design a footer with wave animation effect, giving the impression of water moving gently. The waves will continuously flow from one side to the other, creating a relaxing, visually appealing effect. It’s ideal for beach-themed websites, creative portfolios, or anything else that needs an eye-catching footer.
How It Works:
Let’s dive into the code.
1. HTML Structure
We start with the HTML code. It’s simple, with a <footer> tag containing multiple <div> elements that will represent the waves.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Wave</title> <link rel="stylesheet" href="style.css"> </head> <body> <footer> <div class="waves"> <div class="wave" id="wave1"></div> <div class="wave" id="wave2"></div> <div class="wave" id="wave3"></div> <div class="wave" id="wave4"></div> </div> </footer> </body> </html>
Key Components:
<footer>: This wraps the wave animation and ensures the waves are positioned at the bottom of the page.<div class="waves">: A container for the waves. Inside it, there are four<div>elements with the classwave, each representing one wave.<div class="wave" id="wave1">: These IDs are important as they target specific waves for styling and animation.
2. CSS Styling and Animation For Wave Animation Effect
Now for the fun part—creating the wave effect with CSS! This is where we use background images and animation to bring the waves to life.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 100vh;
background: #333;
}
footer {
position: relative;
width: 100%;
height: 200px;
background: #3586ff;
}
footer .wave {
position: absolute;
top: -100px;
width: 100%;
height: 100px;
background: url(wave.png);
background-size: 1000px 100px;
}
footer .wave#wave1 {
z-index: 1000;
opacity: 1;
bottom: 0px;
animation: animate 4s linear infinite;
}
footer .wave#wave3 {
z-index: 999;
opacity: 0.2;
bottom: 15px;
animation: animate 3s linear infinite;
}
footer .wave#wave2 {
z-index: 998;
opacity: 0.5;
bottom: 10px;
animation: animate2 4s linear infinite;
}
footer .wave#wave4 {
z-index: 999;
opacity: 0.7;
bottom: 20px;
animation: animate2 3s linear infinite;
}
@keyframes animate {
0% {
background-position: 1000px;
}
100% {
background-position: 0;
}
}
@keyframes animate2 {
0% {
background-position: 0px;
}
100% {
background-position: 1000px;
}
}
Explanation of the Wave Animation Effect CSS:
-
Wave Styling: Each wave has the class
.waveand uses abackgroundproperty that references an image of a wave (wave.png). You can replace this with any image you prefer or even use a gradient.We position the waves absolutely within the
<footer>tag to ensure they stack on top of each other. -
Opacity & Z-Index: By adjusting the
opacityandz-indexproperties, we create the effect of varying transparency and depth, making it seem like the waves are layered on top of one another. -
Animation: The key part of this effect is the
@keyframesrule. There are two animations:-
animate: This moves the wave from right to left. -
animate2: This animation moves the wave in the opposite direction (left to right).
By giving each wave a different animation timing (using
animation), the waves move at different speeds, which creates a more natural, dynamic look. -
Adding the Wave Image:
The background: url(wave.png); is where you define the wave image. You can find free wave images online or use a custom-made graphic. Ensure the image is wide enough (1000px in this case) to ensure smooth scrolling.
Wave Animation Effect Result:
The result of this code is a footer with animated waves that flow smoothly across the screen. The animation is continuous, so the waves will keep moving indefinitely, giving a peaceful and dynamic feel to the website’s design.
Customization Tips:
-
Speed: You can adjust the speed of the waves by changing the
4sor3sin theanimationproperty. -
Wave Image: Try using different wave images to match the theme of your website.
-
Height: If you want taller waves, increase the height of the
.waveclass.
Conclusion:
With just a few lines of code, you can add a stylish wave animation to the footer of your website. Whether you’re building a beach-themed site or just want to add a bit of motion, this is a simple and effective way to enhance the user experience. Try experimenting with different wave images, colors, and speeds to make the effect unique to your project!
Download Full Code With Image
Want to implement this Wave Animation Effect footer in your project?
Frequently Asked Questions (FAQ)
What kind of image should I use for the wave?
The wave image should ideally have a transparent background to allow the footer’s background color to show through the waves. Make sure the image has a good width (around 1000px) and is seamless to allow for continuous looping without noticeable breaks. You can search for free wave images on sites like Unsplash or Pixabay, or create your own!
Can I adjust the wave speed?
Yes! The wave speed is controlled by the animation property in the CSS. In the current code, the waves have an animation duration of 4s or 3s. To change the speed, simply adjust these numbers. For example, change 4s to 2s for faster waves, or increase it to 6s for slower waves.
How can I change the color of the waves?
To change the wave’s color, you can either:
Modify the background image itself by editing the wave image in an image editor, or
Replace the wave image with a CSS gradient, like this:
background: linear-gradient(to right, #00bcd4, #3586ff);
This way, you can create waves with any color you like.
The wave animation isn’t showing up, what should I check?
Image URL: Make sure that your wave.png image is correctly linked. If the path is wrong, the waves won’t display.
Viewport Size: Sometimes, the footer may not be visible if the page is too small or not tall enough. Ensure your webpage has enough content to allow scrolling or check your page’s height and layout.
CSS Link: Ensure the style.css file is linked correctly in the HTML <head> section.
Can I use more or fewer waves in the footer?
Absolutely! You can add as many waves as you want in the <footer> by duplicating the <div class="wave"> elements. If you add more waves, make sure to give them unique IDs like wave5, wave6, etc., and adjust their styles accordingly in the CSS.
Is this animation responsive?
Yes! The animation and layout are designed to work on different screen sizes. The waves’ width is set to 100%, meaning they will scale to the full width of the screen. If you need further responsiveness, you could tweak the heights or animation properties using media queries.
