Learn how to create an impressive Animated Tab Bar in HTML, CSS, and JavaScript with this step-by-step guide. Boost your User Experience with animation in UI Design
Table of Contents
An Animated Tab Bar is a visually engaging and interactive element in a user interface that allows users to switch between different content sections. In today's digital age, it is crucial to have a good User Experience (UX) design to keep users engaged with your website or application. The use of animations can play a crucial role in enhancing the overall UX. This tutorial will guide you through the process of creating an Animated Tab Bar in HTML, CSS, and JavaScript to impress your users and take your UI design to the next level.
Watch the full tutorial on my YouTube Channel: Watch Here.
Let's start making an amazing animated tab bar made using HTML, CSS and JavaScript step by step.
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 tab bar.
After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.
Copy the animated icons HTML codes from lordicon.com
Step 2 (CSS Code):
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create an animated effect on the tab bar. We will also add some padding and margin properties to ensure that everything looks correct.
This will give our tab bar 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{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
overflow: hidden;
}
.container{
background-color: #fff;
padding: 12px 5px;
border-radius: 15px;
}
.menu{
display: flex;
}
.menu-item{
padding: 10px 20px;
background-color: #e0efff;
margin-right: 15px;
border-radius: 50px;
white-space: nowrap;
height: 30px;
width: 30px;
cursor: pointer;
transition: 0.3s ease;
}
.txt {
font-family: Segoe UI;
font-size: 15px;
font-weight: 700;
opacity: 0;
transition: 0.3s ease;
}
.item-is-active{
width: 100px;
}
.item-is-active .txt{
opacity: 1;
}
.home-btn{
background: #cffcff;
color: #b91400;
}
.camera-btn{
background-color: #f1ddff;
color: #c25e00;
}
.setting-btn{
background: #f1ddff;
color: #5c007a;
}
.profile-btn{
background: #f1ddff;
color: #c6a700;
} Step 3 (JavaScript Code):
Finally, we need to create a background color function in JavaScript. Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file. Remember, you’ve to create a file with .js extension.
let menu = document.querySelectorAll(".menu-item");
let firstactive = document.querySelector(".item-is-active");
let activecolor = getComputedStyle(firstactive).color;
document.body.style.backgroundColor = activecolor;
menu.forEach((item) => {
item.addEventListener("click", function() {
let accentColor = getComputedStyle(this).color;
this.children[0].style.borderColor = accentColor;
if(!this.classList.contains("item-is-active")){
document.body.style.background = accentColor;
}
menu.forEach((item) => {
item.classList.remove("item-is-active");
this.classList.add("item-is-active");
});
});
});Final Output:
Conclusion:
In conclusion, an animated tab bar can greatly enhance the user experience of a website or application. By adding animation to the tab bar, we can create a more engaging and interactive user interface. In this tutorial, we explored the HTML, CSS, and JavaScript needed to create an animated tab bar. We discussed the basic HTML structure for a tab bar, the CSS styling needed to create a visually appealing design, and the JavaScript functionality needed to add animation. By following the steps outlined in this tutorial, you can easily create your own animated tab bar and impress your users.
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 😊
