In this video we are going to build animated tab using vanilla JavaScript , HTML and CSS.We have covered this topic in less than 12 minutes. You can this tab for websites to give it a professional look.
Subscribe : https://www.youtube.com/channel/UC9vqZpApNd4M0Pl5yR4banw
Source Code :
HTML :
<html>
<head>
<title>Animated Tabs</title>
<link _rel_="stylesheet" _href_="style.css">
</head>
<body>
<div _class_="tabContainer">
<header>
<div _id_="indicator"></div>
HTML
CSS
JavaScript
</header>
<div _class_="tabHolder">
<div _class_="tabContent" _id_="tab1">
<img _src_="images/html.png">
<p>Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript.</p>
</div>
<div _class_="tabContent" _id_="tab2">
<img _src_="images/css.png">
<p>Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>
</div>
<div _class_="tabContent" _id_="tab3">
<img _src_="images/js.jpg">
<p>JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions.</p>
</div>
</div>
</div>
<script _src_="app.js"></script>
</body>
</html>
CSS :
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: righteous;
}
body {
width: 100%;
height: 100vh;
background: #f5f7f8;
display: flex;
justify-content: center;
align-items: center;
}
.tabContainer {
width: 60%;
height: 70%;
background: #fff;
box-shadow: 0 10px 25px -3px rgba(0,0,0,0.4);
display: flex;
flex-direction: column;
border-radius: 10px;
}
header {
background: #2979FF;
color: #fff;
border-radius: 10px 10px 0 0;
padding: 12px 0;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
height: 10%;
position: relative;
}
#indicator {
position: absolute;
left: 0;
height: 4px;
width: 0;
bottom: 0;
background: #FFC107;
border-radius: 10px 10px 0 0;
transition: 0.3s;
}
.tabBtn {
font-size: 1.2rem;
padding: 0 18px;
cursor: pointer;
opacity: 0.7;
transition: 0.3s;
}
.tabBtn:hover {
opacity: 1;
}
.tabHolder {
width: 100%;
height: 90%;
background: #fff;
border-radius: 0 0 10px 10px;
overflow: hidden;
}
.tabContent {
width:100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 0 20px;
animation: animate 1s;
}
.tabContent img {
height: 130px;
height: 130px;
margin-bottom: 30px;
}
.tabContent p {
width:85%;
font-size: 1.1rem;
text-align: justify;
}
.active {
opacity: 1;
color: #FFC107;
}
@keyframes animate {
0%{
opacity: 0;
}
100% {
opacity: 1;
}
}
JavaScript :
var indicator = document.querySelector('#indicator');
var tabBtn = document.querySelectorAll('.tabBtn');
function moveIndicator(e) {
indicator.style.left = e.offsetLeft + 'px';
indicator.style.width = e.offsetWidth + 'px';
}
tabBtn.forEach(item => {
item.addEventListener("click" , (e)=> {
moveIndicator(e.target);
});
});
function openTabs(evnt , tabId) {
var i , tabBtn , tabContent ;
tabBtn = document.querySelectorAll('.tabBtn');
tabContent = document.querySelectorAll('.tabContent');
for(i=0;i<tabContent.length;i++){
tabContent[i].style.display = "none";
}
for(i=0;i<tabBtn.length;i++){
tabBtn[i].className = tabBtn[i].className.replace(" active", "");
}
document.getElementById(tabId).style.display = "flex";
evnt.currentTarget.className += " active";
}
#javascript #html #css
7.65 GEEK