Learn how to create an animated footer using HTML and CSS to captivate your website visitors. Elevate your web design game today!
Table of Contents
Animated footers are a captivating element of modern web design. They not only add a touch of elegance but also improve user engagement and navigation. In this blog post, we'll explore the world of animated footers and guide you through the process of creating one with HTML and CSS.
Benefits of Animated Footers
Animated footers are more than just eye candy. They offer several advantages for your website:
- Enhanced User Experience: Animated footers make your site visually appealing, ensuring a memorable user experience.
- Improved Navigation: These footers can include quick links and call-to-action buttons, making navigation a breeze.
- Increased User Engagement: Interactive elements in your footer can keep visitors on your site longer, increasing engagement.
- Unique Branding: A well-designed footer can reinforce your brand identity and leave a lasting impression.
Prerequisites for Implementation
Before diving into the technical details, here are a few things you need:
- HTML and CSS Knowledge: You should have a basic understanding of HTML and CSS to follow this guide.
- Text Editor: Use a text editor like Visual Studio Code or Sublime Text for coding.
- Imagination: Let your creativity flow when designing your animated footer.
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 footer.
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.
I'll break down the code for you:
1. <!DOCTYPE html>: This declaration specifies that the document is an HTML5 document.
2. <html lang="en">: This opening tag defines the beginning of the HTML document and sets the language of the document to English.
3. <head>: The head section contains meta-information and links to external resources. It doesn't display content on the web page itself.
- <meta charset="UTF-8" />: Specifies that the character encoding of the document is UTF-8, which supports various characters and symbols.
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />: This is a meta tag for Internet Explorer compatibility, setting it to the latest version available.
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />: This meta tag is used for responsive web design, ensuring the content adapts to different screen sizes.
- <title>Animated Footer</title>: Sets the title of the web page, which is displayed in the browser's title bar or tab.
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" ... />: This is a link to an external CSS stylesheet for using Font Awesome icons on the page.
- <link rel="preconnect" href="https://fonts.googleapis.com" />: Preconnects to Google Fonts to optimize loading.
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />: Preconnects to Google Fonts' content delivery network (CDN) with cross-origin attributes.
- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet" />: Loads a Google Font called "Poppins" with specific font weights.
- <link rel="stylesheet" href="styles.css" />: Links to an external CSS file named "styles.css."
4. <body>: The body section contains the visible content of the web page.
5. <footer>: This represents the footer section of the web page.
6. <div class="background">: A div element with a class "background" is used to style the background of the footer with an animated wave-like design.
7. Inside the "background" div, there is an SVG (Scalable Vector Graphics) element that defines the wave background using a linear gradient.
8. <section>: This section contains the actual content of the footer.
- <ul class="socials">: An unordered list (ul) with a class "socials" for social media icons.
- <ul class="links">: Another unordered list with a class "links" for links to various sections of the website.
- <p class="legal">© 2023 All rights reserved</p>: A paragraph element with class "legal" that contains copyright information for the website.
This is the basic structure of our footer using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the footer is in place, the next step is to add styling to the footer using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our footer. Let's break down the code block by block:
1. Styling the body element:
- The margin is set to 0, which removes any default margin around the entire webpage.
- The background property sets a linear gradient background from dark gray (#0d0d0d) at the top to a slightly lighter gray (#212121) at the bottom.
- The font-family is specified as "Euclid Circular A" and, if not available, it will fall back to "Poppins" for the text on the page.
- The text color is set to a light gray (#d6dfed).
2. Styling the html and body elements:
- The height of both the html and body elements is set to 100%, ensuring that they take up the full height of the viewport.
3. Styling a class called "background":
- This class is used to create a full-width and full-height background for the webpage.
- It is positioned absolutely (position: absolute) and has a z-index set to -1, which places it behind other content.
- The top, left, right, and bottom properties are all set to 0, making it cover the entire viewport.
4. Styling unordered lists (ul):
- The display property is set to "flex," which allows the list items to be displayed horizontally in a row.
- The list-style is set to "none," which removes the default bullet points from list items.
- Both padding and margin are set to 0, removing any spacing around the list.
5. Styling a class called "socials":
- It adds a gap of 20 pixels between the elements inside this class.
- The child elements (links) within this class have a font size of 24 pixels.
6. Styling a class called "links":
- It adds a gap of 10 pixels between the elements inside this class.
7. Styling a class called "legal":
- The text inside this class is set to a smaller font size (12px), and any margin is removed (set to 0).
8. Styling SVG elements:
- The position is set to absolute.
- The SVG is stretched to cover the entire width and height of its parent container.
- A transformation is applied to scale the SVG both vertically and horizontally (3 times and 2.25 times, respectively), with the transformation origin set to the bottom.
- It is displayed as a block-level element and has pointer events disabled (so it won't respond to mouse clicks).
9. Styling the footer:
- The footer is positioned as fixed at the bottom of the viewport.
- It stretches from the left to the right and is placed 12 pixels from the bottom.
- The content inside the footer is displayed as a flex container, allowing for flexible layout.
10. Styling a "section" element:
- The section elements are displayed as flex containers with a vertical column layout.
- Content is justified to the bottom of the container, creating space at the top.
- There's a gap of 30 pixels between child elements and additional padding at the bottom and left of 80 pixels and 60 pixels, respectively.
- The width is set to 100%.
11. Media query:
A media query is used to adjust styles when the width of the viewport is greater than 420 pixels.
Inside the media query:
- The section elements are aligned to the center and have reduced padding and gap.
- The "links" class has a larger gap of 20 pixels between its elements.
This will give our footer 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;
background: linear-gradient(#0d0d0d, #212121);
font-family: "Euclid Circular A", "Poppins";
color: #d6dfed;
}
html,
body {
height: 100%;
}
.background {
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
.socials {
gap: 20px;
}
.socials a {
font-size: 24px;
}
.links {
gap: 10px;
}
.legal {
font-size: 12px;
margin: 0;
}
svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scaleY(3) scaleX(2.25);
transform-origin: bottom;
box-sizing: border-box;
display: block;
pointer-events: none;
}
footer {
position: fixed;
left: 0;
bottom: 12px;
display: flex;
width: 100%;
height: 370px;
}
section {
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 30px;
padding-bottom: 80px;
padding-left: 60px;
width: 100%;
}
@media (width > 420px) {
section {
align-items: center;
padding-left: 0;
gap: 20px;
}
.links {
gap: 20px;
}
} Final Output:
Conclusion:
Animated footers are a fantastic way to enhance your website's appeal and functionality. With HTML and CSS, creating one is well within your reach. Elevate your web design and user experience by adding this interactive element to your site.
By following these steps, you can create a stunning animated footer for your website. Remember to keep user experience in mind and let your creativity flow. It's the little details like this that set your website apart. Happy coding!
Credit: Online Tutorials
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
