Tab Bar Animation in HTML, CSS, JavaScript | Project Series Day - 23 | Frontend everything
Hello Everyone 👋Welcome to My New Blog. Today I have made a Tab Bar Animation with the help of HTML, CSS, JavaScript. It is Project Series Day 23. 😍
I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.
Let's start making product card designs to use in websites step by step.
Video Preview of the project,
So that was the preview now let us start making the project 😄 First, we will code HTML, CSS then Javascript, and also I have shared codepen ink to make it easier for you.
HTML 🎈( step - 1)
We first have to import links then make the div for the elements we want to make,.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<div class="wrapper">
<div class="navbar">
<i class="fas fa-home icon-home"></i>
<i class="fas fa-cog icon-settings"></i>
<div class="circle">
<i class="fas fa-plus plus-icon"></i>
<i class="fab fa-youtube social"></i>
<i class="fab fa-twitter social"></i>
<i class="fab fa-github social"></i>
</div>
<div class="circleBackground"></div>
</div>
</div>CSS🎈( step - 2)
Now let's design the amazing tab bar animation
html,
body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
* {
box-sizing: border-box;
}
.wrapper {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #fdc0df;
}
.navbar {
position: relative;
height: 100px;
min-width: 400px;
padding-left: 35px;
padding-right: 35px;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 25px;
background-color: white;
box-shadow: 0 10px 20px rgba(82, 74, 74, 0.3);
}
.navbar:after {
content: "";
position: absolute;
bottom: 7px;
height: 4px;
width: 35%;
left: 50%;
transform: translateX(-50%);
background-color: gray;
opacity: 0.3;
}
.circle {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: calc(100px - 40px);
margin-bottom: 0;
height: 80px;
width: 80px;
border-radius: 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
background-color: #ff5e00;
z-index: 9;
box-shadow: 0 5px 5px rgba(255, 147, 85, 0.35);
transition: height 0.3s;
}
.circle:hover {
height: 200px;
border-radius: 50px;
}
.circle .plus-icon {
color: white;
font-size: 27px;
transition: opacity 0.3s, transform 0.2s;
}
.circle:hover .plus-icon {
transform: rotate(360deg);
opacity: 0;
}
.circle .social {
position: absolute;
top: 195px;
color: white;
background-color: rgba(255, 212, 212, 0.308);
height: 60px;
width: 60px;
margin-bottom: 5px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 25px;
cursor: pointer;
}
.circle .social:nth-child(2) {
opacity: 0;
transition: opacity 0.3s, top 0.5s ease;
}
.circle .social:nth-child(3) {
opacity: 0;
transition: opacity 0.3s, top 0.5s 0.1s ease;
}
.circle .social:nth-child(4) {
opacity: 0;
transition: opacity 0.3s, top 0.5s 0.22s ease;
margin-bottom: 0px;
}
.circle:hover .social:nth-child(2) {
opacity: 1;
top: 5px;
}
.circle:hover .social:nth-child(3) {
opacity: 1;
top: calc(5px + 60px + 5px);
}
.circle:hover .social:nth-child(4) {
opacity: 1;
top: calc(5px + 60px + 5px + 60px + 5px);
}
.circleBackground {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: calc(100px - 100px / 2);
margin-bottom: 0;
height: calc(80px + 20px);
width: calc(80px + 20px);
border-radius: calc(100px / 2);
background-color: #fdc0df;
}
.icon-home,
.icon-settings {
font-size: 29px;
color: #fdc0df;
}JavaScript🎈( step - 3)
Now, let us move to JavaScript coding to make the UI work.
let links = document.querySelectorAll('li.link');
let buble = document.querySelector('.buble');
links.forEach(el=>el.addEventListener('click',(e)=>{
document.querySelector('li.active').classList.remove('active')
el.classList.add('active');
buble.style.left = `${el.offsetLeft + 8}px`
}))All the coding part is done, now let us see the final output, and also below I have mentioned the codepen link.
Final Output
The codepen link is here for making your work easier!
.
.
.
.
.
.
Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.
.