How to create Animated Tab Bar using html,css,javascript
So in this video, you are going to know about How to create Animated Tab Bar using HTML, CSS, and javascript... so you just need to stay with us and check the below video with the code so you can also create the exact same as shown. so let's start...
 |
| How to create Animated Tab Bar using html |
so you have to only do just download vs studio code or notepad++ or anything that you want to use and do code step by step as below show.
Step to download vs code :
1. Go to https://code.visualstudio.com/
2. Download the installer and stable version as per your device
3. install on your pc or mac
If you don't want to download it so you can also use the web version of it here is the link so you can go and write code as you want: https://vscode.dev/
```
HTML CODE:
<menu class="menu"><button class="menu__item active" style="--bgColorItem: #ff8c00;" ><svg class="icon" viewBox="0 0 24 24"><path d="M3.8,6.6h16.4"/><path d="M20.2,12.1H3.8"/><path d="M3.8,17.5h16.4"/></svg></button><button class="menu__item" style="--bgColorItem: #f54888;"><svg class="icon" viewBox="0 0 24 24"><path d="M6.7,4.8h10.7c0.3,0,0.6,0.2,0.7,0.5l2.8,7.3c0,0.1,0,0.2,0,0.3v5.6c0,0.4-0.4,0.8-0.8,0.8H3.8C3.4,19.3,3,19,3,18.5v-5.6c0-0.1,0-0.2,0.1-0.3L6,5.3C6.1,5,6.4,4.8,6.7,4.8z"/><path d="M3.4,12.9H8l1.6,2.8h4.9l1.5-2.8h4.6"/></svg></button><button class="menu__item" style="--bgColorItem: #4343f5;" ><svg class="icon" viewBox="0 0 24 24"><path d="M3.4,11.9l8.8,4.4l8.4-4.4"/><path d="M3.4,16.2l8.8,4.5l8.4-4.5"/><path d="M3.7,7.8l8.6-4.5l8,4.5l-8,4.3L3.7,7.8z"/></button><button class="menu__item" style="--bgColorItem: #e0b115;" ><svg class="icon" viewBox="0 0 24 24" ><path d="M5.1,3.9h13.9c0.6,0,1.2,0.5,1.2,1.2v13.9c0,0.6-0.5,1.2-1.2,1.2H5.1c-0.6,0-1.2-0.5-1.2-1.2V5.1C3.9,4.4,4.4,3.9,5.1,3.9z"/><path d="M4.2,9.3h15.6"/><path d="M9.1,9.5v10.3"/></button><button class="menu__item" style="--bgColorItem:#65ddb7;"><svg class="icon" viewBox="0 0 24 24" ><path d="M5.1,3.9h13.9c0.6,0,1.2,0.5,1.2,1.2v13.9c0,0.6-0.5,1.2-1.2,1.2H5.1c-0.6,0-1.2-0.5-1.2-1.2V5.1C3.9,4.4,4.4,3.9,5.1,3.9z"/><path d="M5.5,20l9.9-9.9l4.7,4.7"/><path d="M10.4,8.8c0,0.9-0.7,1.6-1.6,1.6c-0.9,0-1.6-0.7-1.6-1.6C7.3,8,8,7.3,8.9,7.3C9.7,7.3,10.4,8,10.4,8.8z"/></svg></button><div class="menu__border"></div></menu><div class="svg-container"><svg viewBox="0 0 202.9 45.5" ><clipPath id="menu" clipPathUnits="objectBoundingBox" transform="scale(0.0049285362247413 0.021978021978022)"><path d="M6.7,45.5c5.7,0.1,14.1-0.4,23.3-4c5.7-2.3,9.9-5,18.1-10.5c10.7-7.1,11.8-9.2,20.6-14.3c5-2.9,9.2-5.2,15.2-7c7.1-2.1,13.3-2.3,17.6-2.1c4.2-0.2,10.5,0.1,17.6,2.1c6.1,1.8,10.2,4.1,15.2,7c8.8,5,9.9,7.1,20.6,14.3c8.3,5.5,12.4,8.2,18.1,10.5c9.2,3.6,17.6,4.2,23.3,4H6.7z"/></clipPath></svg></div>
```
CSS CODE :
```
html {box-sizing: border-box;--bgColorMenu : #1d1d27;--duration: .7s;}html *,html *::before,html *::after {box-sizing: inherit;}body{margin: 0;display: flex;height: 100vh;overflow: hidden;align-items: center;justify-content: center;background-color: #ffb457;-webkit-tap-highlight-color: transparent;transition: background-color var(--duration);}.menu{margin: 0;display: flex;/* Works well with 100% width */width: 32.05em;font-size: 1.5em;padding: 0 2.85em;position: relative;align-items: center;justify-content: center;background-color: var(--bgColorMenu);}.menu__item{all: unset;flex-grow: 1;z-index: 100;display: flex;cursor: pointer;position: relative;border-radius: 50%;align-items: center;will-change: transform;justify-content: center;padding: 0.55em 0 0.85em;transition: transform var(--timeOut , var(--duration));}.menu__item::before{content: "";z-index: -1;width: 4.2em;height: 4.2em;border-radius: 50%;position: absolute;transform: scale(0);transition: background-color var(--duration), transform var(--duration);}.menu__item.active {transform: translate3d(0, -.8em , 0);}.menu__item.active::before{transform: scale(1);background-color: var(--bgColorItem);}.icon{width: 2.6em;height: 2.6em;stroke: white;fill: transparent;stroke-width: 1pt;stroke-miterlimit: 10;stroke-linecap: round;stroke-linejoin: round;stroke-dasharray: 400;}.menu__item.active .icon {animation: strok 1.5s reverse;}@keyframes strok {100% {stroke-dashoffset: 400;}}.menu__border{left: 0;bottom: 99%;width: 10.9em;height: 2.4em;position: absolute;clip-path: url(#menu);will-change: transform;background-color: var(--bgColorMenu);transition: transform var(--timeOut , var(--duration));}.svg-container {width: 0;height: 0;}@media screen and (max-width: 50em) {.menu{font-size: .8em;}}
```
JS JAVASCRIPT:
```
"use strict";const body = document.body;const bgColorsBody = ["#ffb457", "#ff96bd", "#9999fb", "#ffe797", "#cffff1"];const menu = body.querySelector(".menu");const menuItems = menu.querySelectorAll(".menu__item");const menuBorder = menu.querySelector(".menu__border");let activeItem = menu.querySelector(".active");function clickItem(item, index) {menu.style.removeProperty("--timeOut");if (activeItem == item) return;if (activeItem) {activeItem.classList.remove("active");}item.classList.add("active");body.style.backgroundColor = bgColorsBody[index];activeItem = item;offsetMenuBorder(activeItem, menuBorder);}function offsetMenuBorder(element, menuBorder) {const offsetActiveItem = element.getBoundingClientRect();const left = Math.floor(offsetActiveItem.left - menu.offsetLeft - (menuBorder.offsetWidth - offsetActiveItem.width) / 2) + "px";menuBorder.style.transform = `translate3d(${left}, 0 , 0)`;}offsetMenuBorder(activeItem, menuBorder);menuItems.forEach((item, index) => {item.addEventListener("click", () => clickItem(item, index));})window.addEventListener("resize", () => {offsetMenuBorder(activeItem, menuBorder);menu.style.setProperty("--timeOut", "none");});
```
Original Other :
- https://dribbble.com/shots/5619509-Animated-Tab-Bar
Link After Subscribe:
Click On The Button And Subscribe My Youtube Channel To Open Link Then Get Back To The Page...
Tags
HTML-CSS-JAVASCRIPT