In this article, we will create a tap bar that you can use in your mobile projects. Let's first look at what are we building:
Let's code...
HTML
<div class="container">
<div class="bar">
<div class="bar-item pre-active" onclick="changeActive(this)">
<div class="bar-fluid"></div>
<div class="drop"></div>
<i class="far fa-calendar-alt"></i>
</div>
<div class="bar-item" onclick="changeActive(this)">
<div class="bar-fluid"></div>
<div class="drop"></div>
<i class="far fa-sticky-note"></i>
</div>
<div class="bar-item" onclick="changeActive(this)">
<div class="bar-fluid"></div>
<div class="drop"></div>
<i class="far fa-bell"></i>
</div>
<div class="bar-item" onclick="changeActive(this)">
<div class="bar-fluid"></div>
<div class="drop"></div>
<i class="far fa-address-book"></i>
</div>
</div>
</div>
In the HTML code, the "bar" class is the container of our tap bar and "bar-item" class are the buttons that trigger the animations.
Now let's look at the CSS:
CSS
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #fc5c65;
}
.bar {
padding: 0px 10px;
display: flex;
align-items: center;
background-color: #ffffff;
border-radius: 10px 10px 20px 20px;
box-shadow: 3px 3px 0px 0px rgb(235 59 90);
}
.bar .bar-item {
position: relative;
overflow: hidden;
padding: 20px 25px;
cursor: pointer;
}
.bar .bar-item i {
z-index: 1;
position: relative;
color: #a4b0be;
transition: all .3s ease-in-out;
}
.bar .bar-item.pre-active i {
color: #fc5c65;
}
.bar .bar-item.active i {
color: #fc5c65;
animation: colour 1s ease-in-out;
}
.bar .bar-item.active .bar-fluid {
position: absolute;
top: 0px;
left: 0px;
background-color: #fc5c65;
width: 100%;
height: 0px;
animation: fluid 1s ease-in-out;
}
.bar .bar-item.active .bar-fluid:before {
content: '';
position: absolute;
top: 0px;
left: -50%;
background-color: #ffffff;
width: 110%;
height: 400%;
border-radius: 50%;
}
.bar .bar-item.active .bar-fluid:after {
content: '';
position: absolute;
top: 0px;
right: -50%;
background-color: #ffffff;
width: 110%;
height: 400%;
border-radius: 50%;
}
.bar .bar-item.active .drop {
position: absolute;
top: -2.5px;
left: 30.5px;
background-color: #fc5c65;
width: 2.5px;
height: 2.5px;
border-radius: 50%;
animation: drop 1s ease-in-out;
}
@keyframes colour {
0% { color: #a4b0be; }
55% {
color: #a4b0be;
transform: scale(1);
}
60% {
color: #fc5c65;
transform: scale(1);
}
70% { transform: scale(1.1); }
80% { transform: scale(1); }
}
@keyframes fluid {
0% { height: 0px; }
30% { height: 10px; }
100% { height: 0px; }
}
@keyframes drop {
20% { top: -2.5px; }
50% { top: 21px; }
51% { top: -2.5px; }
}
JavaScript
const preactiveItem = document.querySelector('.pre-active')
const barItems = document.querySelectorAll('.bar-item')
function changeActive (newActive) {
preactiveItem.classList.remove('pre-active')
barItems.forEach(element => {
element.classList.remove('active')
})
newActive.classList.add('active')
}
Codepen is here:
Top comments (47)
So satisfying.. Nice work..
Thank you!!
Mind blowing work
Thank you!!
Wow. Really nice. Very smooth and that droplet.. Amazing.
Thank you!! I'm working to bring more stuff
It's soo amazing 🔥🔥thanks for sharing code this will help me for my learning 🙂🙂
Thank you!!
♥️👌
Incredible. #stuffsthatilove
I like your post very much it is very informative and interesting. Your posts always inspire me. Keep sharing such wonderful posts, it motivates a lot. flstudio
Dear Romaopedro,may I translate your all dev articles into Chinese?I would like to share it with more developers in China. I will give the original author and original source.
Yes, no problem!!
awesome !!!
Thank you!!
Perfect.
Thank you!!