in this tutorial, I will show you how to create animated tabs using HTML CSS and JAVASCRIPT.
it's a pretty effect that will minimalize your page and make the navigation easier.
for this tutorial, we will need images that we will add in the main section, and we will need the FontAwesome CDN.
images for this tutorial
and this is the FontAwesome CDN code:
<script src="https://kit.fontawesome.com/425a08e296.js"></script>
for this project, you need to know some basics about animation, but you can follow this tutorial, but I really advise you to learn about CSS animation.
you can code with me by this video or you can go and read the source code directly
video tutorial
source code
HTML
<!doctype html>
<html>
<head>
<script src="https://kit.fontawesome.com/425a08e296.js"></script>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="tab_container">
<div class="tab-buttons">
<button onclick="tab(0,0)" class="btn"><i class="fas fa-desktop"></i>web design</button>
<button onclick="tab(1,1)" class="btn"><i class="fas fa-bezier-curve"></i> graphic design</button>
<button onclick="tab(2,2)" class="btn"><i class="fas fa-pencil-ruler"></i>ux/ui design</button>
<div id="indicator" class="indicator"></div>
</div>
<div class="tab-panels">
<div class="panel">
<img src="web.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt eleifend odio et euismod. In ornare tortor sed nisl tristique consequat. Sed imperdiet aliquet dolor ut maximus. Pellentesque aliquet facilisis velit sed venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque non gravida est. Pellentesque at ante ut nibh lobortis elementum ut sit amet sapien. Vivamus at enim posuere, interdum lacus ut, condimentum erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec sit amet ligula nec nunc pellentesque vehicula. Duis sagittis erat ac elementum aliquet. In ornare mauris vel metus semper interdum. Nullam vel tellus non mi gravida volutpat nec at libero. Nunc euismod placerat metus eget imperdiet. Pellentesque hendrerit, urna a varius iaculis, metus arcu congue purus, a suscipit urna dolor et nisi.</p>
</div>
<div class="panel hidden">
<img src="graphic.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt eleifend odio et euismod. In ornare tortor sed nisl tristique consequat. Sed imperdiet aliquet dolor ut maximus. Pellentesque aliquet facilisis velit sed venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque non gravida est. Pellentesque at ante ut nibh lobortis elementum ut sit amet sapien. Vivamus at enim posuere, interdum lacus ut, condimentum erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec sit amet ligula nec nunc pellentesque vehicula. Duis sagittis erat ac elementum aliquet. In ornare mauris vel metus semper interdum. Nullam vel tellus non mi gravida volutpat nec at libero. Nunc euismod placerat metus eget imperdiet. Pellentesque hendrerit, urna a varius iaculis, metus arcu congue purus, a suscipit urna dolor et nisi.</p>
</div>
<div class="panel hidden">
<img src="ui.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt eleifend odio et euismod. In ornare tortor sed nisl tristique consequat. Sed imperdiet aliquet dolor ut maximus. Pellentesque aliquet facilisis velit sed venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque non gravida est. Pellentesque at ante ut nibh lobortis elementum ut sit amet sapien. Vivamus at enim posuere, interdum lacus ut, condimentum erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec sit amet ligula nec nunc pellentesque vehicula. Duis sagittis erat ac elementum aliquet. In ornare mauris vel metus semper interdum. Nullam vel tellus non mi gravida volutpat nec at libero. Nunc euismod placerat metus eget imperdiet. Pellentesque hendrerit, urna a varius iaculis, metus arcu congue purus, a suscipit urna dolor et nisi.</p>
</div>
</div>
</div>
</body>
<script src="tab.js"></script>
</html>
CSS
*{
margin: 0;
padding: 0;
outline: 0;
}
.tab_container{
position: absolute;
width: 80%;
left: 50%;
top: 25%;
transform: translate3d(-50%,0,0);
}
.indicator{
position: relative;
display: block;
width: 33%;
height: 4px;
background-color: #90a4ae;
transition: .4s;
left: 0;
}
.tab-buttons button{
width: 33%;
padding: 15px 0;
border: none;
background: #fff;
transition:.4s;
font-size: 2rem;
color: #90a4ae;
}
.tab-buttons button i{
margin-right: 15px;
}
.tab-panels{
padding: 15px 0px;
}
.tab-panels .panel img{
float: left;
width: 33%;
margin-right: 15px;
animation-name: ImgAnimation;
animation-duration: 2s;
}
.tab-panels .panel p{
font-size: 18px;
line-height: 2em;
animation-name: p-animation;
animation-duration: 2s;
}
@keyframes ImgAnimation{
0%{
transform: translateY(50px);
opacity: 0;
}
100%;{
transform: translateY(0);
opacity: 1;
}
}
@keyframes p-animation{
0%{
transform: translateX(50px);
opacity: 1;
}
100%{
transform: translateX(0);
opacity: 1;
}
}
.hidden{
display: none;
}
JAVASCRIPT
var btns = document.getElementsByClassName('btn');
var panels = document.getElementsByClassName('panel');
var indicator = document.getElementById('indicator');
function tab(btn,panel){
for(var i=0;i<panels.length;i++){
if(i==panel){
panels[panel].style.display='block';
}else{
panels[i].style.display='none';
}
}
indicator.style.left=String(btn*33)+"%";
}
and that's it, i hope that you liked this tutorial, if you have some problem with that project, please post it in the comment and we will respond to you as soon as possible
CREATE TABS USING HTML CSS AND JAVASCRIPT
Reviewed by Medics
on
June 08, 2019
Rating:
Reviewed by Medics
on
June 08, 2019
Rating:
This is good keep it up guys ...I wish to do some like these
ReplyDeletethank for commenting , we will try our best and will help you to do the same thing, keep going
ReplyDeleteThank you for sharing this
ReplyDeleteKeep going