Introduction:

Welcome to our step-by-step guide on creating an Animated Wave Banner using HTML and CSS. In the ever-evolving landscape of web design, dynamic elements like animated banners have become essential for capturing visitors’ attention. Whether you’re a beginner looking to enhance your skills or an intermediate developer eager to delve into CSS animations, this tutorial is designed for you.

Why Animated Banners?

Animated banners add a touch of creativity and interactivity to your website, making it visually appealing and engaging. With the power of HTML and CSS, you can bring static elements to life with smooth and eye-catching animations. In this tutorial, we will explore the art of crafting an animated wave banner – a versatile and attention-grabbing element that can elevate your web design to new heights.

What to Expect:

  • Hands-On Learning: This guide is a hands-on experience, allowing you to follow along and implement each step in real-time.
  • No Coding Experience Required: Whether you’re a coding novice or have some experience, we’ve simplified the process to make it accessible to everyone.
  • Creativity Unleashed: Learn the fundamentals of HTML animation and CSS styling while unleashing your creativity to design a stunning animated banner.

Now, let’s dive into the world of HTML and CSS animation and turn your web design visions into reality!

Source Code:

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our wave banner.

After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

Let’s break the code down:

1. <!DOCTYPE html>: This declaration defines the document type and version of HTML being used (HTML5 in this case).

2. <html lang=”en”>: The opening tag for the HTML document, specifying the language as English.

3. <head>: Contains metadata about the HTML document, including character set, viewport settings, title, and links to external resources.

  • <meta charset=”UTF-8″ />: Sets the character encoding to UTF-8.
  • <meta http-equiv=”X-UA-Compatible” content=”IE=edge” />: Instructs Internet Explorer to use its latest rendering engine.
  • <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />: Defines the viewport properties for responsive design.
  • <title>Banner Wave Animation</title>: Sets the title of the webpage.
  • External CSS and Font Awesome CDN links for styling and icons.

4. <body>: Contains the content of the HTML document.

5. <section class=”banner”>: Defines a section with the class “banner” that contains an image and a div with text content.

  • <img src=”…”>: Displays an image with the specified source.
  • <div class=”banner-content”>: Contains text content.
  • <h2>Hello</h2>: Displays a level 2 heading with the text “Hello.”
  • <p>…web experiences.</p>: Displays a paragraph with some descriptive text.

6. <svg>: Defines an SVG (Scalable Vector Graphics) element for the wave  animation.

  • <defs>: Contains definitions for reusable SVG elements.
  • <path>: Defines a path with the id “gentle-wave” and a specific shape represented by the d attribute.
  • <g class=”waves”>: Groups SVG elements with the class “waves” for styling.
  • <use>: References the defined path with different attributes for position, color, and opacity, creating a layered wave effect.

7. The webpage structure is closed with the closing </body> and </html> tags.

This is the basic structure of our wave banner using HTML, and now we can move on to styling it using CSS.

				
					<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Banner Wave Animation</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <section class="banner">
      <img decoding="async" data-src="https://raw.githubusercontent.com/frontend-joe/css-banners/main/banner-2/me.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="lazyload" /><noscript><img decoding="async" src="https://raw.githubusercontent.com/frontend-joe/css-banners/main/banner-2/me.png" /></noscript>
      <div class="banner-content">
        <h2>Hello</h2>
        <p>
          I'm Joe, a talented frontend developer that loves creating immersive
          web experiences.
        </p>
      </div>
    </section>

    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 24 150 28"
      preserveAspectRatio="none"
    >
      <defs>
        <path
          id="gentle-wave"
          d="M-160 44c30 0
        58-18 88-18s
        58 18 88 18
        58-18 88-18
        58 18 88 18
        v44h-352z"
        />
      </defs>
      <g class="waves">
        <use
          xlink:href="#gentle-wave"
          x="50"
          y="0"
          fill="#03ffff"
          fill-opacity=".2"
        />
        <use
          xlink:href="#gentle-wave"
          x="50"
          y="3"
          fill="#03ffff"
          fill-opacity=".5"
        />
        <use
          xlink:href="#gentle-wave"
          x="50"
          y="6"
          fill="#03ffff"
          fill-opacity=".9"
        />
      </g>
    </svg>
  </body>
</html>

Step 2 (CSS Code):

Once the basic HTML structure of the banner is in place, the next step is to add styling to the banner using CSS.

Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our wave effect. Let’s break down the CSS code:

1. Body Styles

				
					body {
  margin: 0;
  font-family: "Euclid Circular A", "Poppins";
  color: #ddfdfd;
  background: #050808;
}
  • margin: 0;: Removes default margin from the body.
  • font-family: “Euclid Circular A”, “Poppins”;: Sets the font family for the entire page to either “Euclid Circular A” or “Poppins”.
  • color: #ddfdfd;: Sets the text color to a light shade (#ddfdfd).
  • background: #050808;: Sets the background color to a dark shade (#050808).

2. Banner Styles

				
					.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column-reverse;
  gap: 50px;
  padding: 0 80px;
  text-align: center;
  height: 100vh;
  background: #050808;
}
  • display: flex;: Uses a flex container.
  • align-items: center;: Centers items vertically within the container.
  • justify-content: center;: Centers items horizontally within the container.
  • flex-direction: column-reverse;: Arranges flex items in a column and reverses the order.
  • gap: 50px;: Sets the gap between flex items to 50 pixels.
  • padding: 0 80px;: Adds padding of 80 pixels to the left and right.
  • text-align: center;: Centers text within the container.
  • height: 100vh;: Sets the height to 100% of the viewport height.
  • background: #050808;: Sets the background color to a dark shade (#050808).

3. Banner Image Styles

				
					.banner > img {
  width: 60vw;
  transition: 0.1s linear;
}
  • width: 60vw;: Sets the width of the image to 60% of the viewport width.
  • transition: 0.1s linear;: Applies a linear transition effect with a duration of 0.1 seconds.

4. Responsive Styles

				
					@media (width >= 420px) {
  .banner > img {
    width: 40vw;
  }
}

@media (width >= 648px) {
  .banner {
    text-align: left;
    flex-direction: row;
    justify-content: space-between;
  }

  .banner > img {
    width: 30vw;
  }
}
  • Adjusts the image width within the banner at different viewport widths.
  • For widths greater than or equal to 420px, the image width is set to 40vw.
  • For widths greater than or equal to 648px, the banner  layout is changed to a row, and the image width is set to 30vw.

5. Wave Animation Styles

				
					.waves > use {
  animation: move-forever 2s -2s linear infinite;
}

.waves > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 6s;
}
.waves > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 3s;
}

@keyframes move-forever {
  0% {
    transform: translate(-90px, 0%);
  }
  100% {
    transform: translate(85px, 0%);
  }
}
  • Applies a continuous horizontal movement animation to the waves using the move-forever keyframes.
  • The animation has a duration of 2 seconds, starts 2 seconds before the beginning, and repeats infinitely.
  • The second wave has a delay of -3 seconds and a longer duration of 6 seconds.
  • The third wave has a delay of -4 seconds and a shorter duration of 3 seconds.

6. SVG Styles

				
					svg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 30vw;
  max-height: 200px;
}
  • Styles the SVG element to be positioned absolutely at the bottom-left corner of the page.
  • The SVG width is set to 100% of its container.
  • The height is set to 30% of the viewport width, with a maximum height of 200 pixels.

This will give our  animated wave banner an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

				
					body {
  margin: 0;
  font-family: "Euclid Circular A", "Poppins";
  color: #ddfdfd;
  background: #050808;
}

.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column-reverse;
  gap: 50px;
  padding: 0 80px;
  text-align: center;
  height: 100vh;
  background: #050808;
}

.banner > img {
  width: 60vw;
  transition: 0.1s linear;
}

.banner h2 {
  font-weight: 500;
  font-size: 30px;
  margin: 0 0 10px;
}

.banner p {
  margin: 0;
  line-height: 1.65;
  font-size: 17px;
  opacity: 0.7;
}

@media (width >= 420px) {
  .banner > img {
    width: 40vw;
  }
}

@media (width >= 648px) {
  .banner {
    text-align: left;
    flex-direction: row;
    justify-content: space-between;
  }

  .banner > img {
    width: 30vw;
  }
}

.waves > use {
  animation: move-forever 2s -2s linear infinite;
}

.waves > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 6s;
}
.waves > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 3s;
}

@keyframes move-forever {
  0% {
    transform: translate(-90px, 0%);
  }
  100% {
    transform: translate(85px, 0%);
  }
}

svg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 30vw;
  max-height: 200px;
}

Final Output:

Crafting a Stunning Animated Wave Banner with HTML and CSS (Source Code).gif

Conclusion:

Congratulations on completing this tutorial on creating an Animated Wave Banner using HTML and CSS! You’ve now acquired valuable insights into the world of web design and animation.

Remember, the journey of a web developer is a continuous learning experience. Embrace new challenges, stay curious, and never hesitate to explore further. Thank you for embarking on this learning adventure with us! If you have any questions or want to share your creations, feel free to connect with the vibrant web development community. Happy coding!