Smooth.tabs

Developer
Leolo
Size
5,110 Kb
Views
40,480
  1. Smooth.tabs Previews
  2. Smooth.tabs HTML Codes
  3. Smooth.tabs CSS Codes
  4. Smooth.tabs JS Codes

How do I make an smooth.tabs?

What is a smooth.tabs? How do you make a smooth.tabs? This script and codes were developed by Leolo on 08 September 2022, Thursday.

Smooth.tabs Previews
IQ Test

Smooth.tabs - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>smooth.tabs</title> <link href="https://fonts.googleapis.com/css?family=Raleway:300,400" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class='main hList inactive'> <div class="tab active"><span>About</span></div><!-- --><div class="tab"><span>Work</span></div><!-- --><div class="tab"><span>Profiles</span></div><!-- --><div class="tab" ><span>Store</span></div><!-- --><div class="tab" ><span>Tours</span></div><!-- --><div class="tab" ><span>Videos</span></div><!-- --><div class="tab" ><span>News</span></div><!-- --><div class="tab" ><span>Underground</span></div><!-- --><div class="tab" ><span>Connect</span></div>
</nav>
<page id="home"> <span class="pagetag">#HOME</span> <section> <h2><span>W</span><span>ELCOME</span></h2> <h5>COLDPLAY</h5> </section> <section id="grid_wrapper"> <card> <div> <span>ABOUT</span> </div> </card> <card> <div> <span>WORK</span> </div> </card> <card> <div> <span>PROFILES</span> </div> </card> <card> <div> <span>STORE</span> </div> </card> <card> <div> <span>TOURS</span> </div> </card> <card> <div> <span>VIDEOS</span> </div> </card> <card> <div> <span>NEWS</span> </div> </card> <card> <div> <span>UNDERGROUND</span> </div> </card> </section>
</page>
<section id="content_wrapper" class='inactive'> <button class="close">&#xf00d;</button> <div> <section> <h2>#1</h2> <p> Here's some random shit for this random tab on this random template. </p> <p> Here's some random shit for this random tab on this random template. </p> <p> Here's some random shit for this random tab on this random template. </p> </section> <section> <h2>#2</h2> <p> Here's some random shit for this random tab on this random template. </p> <p> Here's some random shit for this random tab on this random template. </p> <p> Here's some random shit for this random tab on this random template. </p> </section> <section> <h2>#3</h2> <p> Here's some random shit for this random tab on this random template. </p> <p> Here's some random shit for this random tab on this random template. </p> <p> Here's some random shit for this random tab on this random template. </p> </section> <section> <h2>#4</h2> <p> Here's some random shit for this random tab on this random template. </p> <p> Here's some random shit for this random tab on this random template. </p> <p> Here's some random shit for this random tab on this random template. </p> </section> <section> <h2>#5</h2> <p> Here's some random shit for this random tab on this random template. </p> <p> Here's some random shit for this random tab on this random template. </p> <p> Here's some random shit for this random tab on this random template. </p> </section> <section> <h2>#6</h2> <p> Here's some random shit for this random tab on this random template. </p> <p> Here's some random shit for this random tab on this random template. </p> <p> Here's some random shit for this random tab on this random template. </p> </section> <section> <h2>#7</h2> <p> Here's some random shit for this random tab on this random template. </p> <p> Here's some random shit for this random tab on this random template. </p> <p> Here's some random shit for this random tab on this random template. </p> </section> <section> <h2>#8</h2> <p> Here's some random shit for this random tab on this random template. </p> <p> Here's some random shit for this random tab on this random template. </p> <p> Here's some random shit for this random tab on this random template. </p> </section> </div>
</section> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.4/SmoothScroll.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Smooth.tabs - Script Codes CSS Codes

body
{ margin:0; overflow-X:hidden; font-family:"Raleway","Roboto","Helvetica",sans-serif; -webkit-font-smoothing:antialiased; -moz-font-smoothing:antialiased; -ms-font-smoothing:antialiased; font-smoothing:antialiased; background:rgba(18,18,26,1); background-image:url('http://artlantis-media.ru/static/img/0000/0002/7260/27260842.qvpm616fga.png'); background-blend-mode:overlay; background-size:15%;
}
::-webkit-scrollbar
{ display:none;
}
/*Grid Wrapper*/
#home
{ color:#aaaaaf; width:100%; height:100%; position:absolute; padding:100px; display:block; transition:transform 0.5s ease-in-out;
}
#home>.pagetag
{ position:absolute; top:10px; left:10px; padding:10px 15px; font-size:0.8em; color:rgba(96,78,177,1); background:rgba(0,0,0,0.1);
}
/*Heading*/
#home h2
{ font-weight:300; letter-spacing:0.07em; margin-left:-20px;
}
#home h5
{ margin-top:-20px; font-weight:400; letter-spacing:2em;
}
#home h2>span:first-child
{ font-size:3em;
}
#home h2>span:nth-child(2)
{ font-size:2em;
}
#grid_wrapper
{ width:100%; display:block; margin-top:60px; box-sizing:border-box; padding:0px 20px; margin-left:-100px; position:relative;
}
#grid_wrapper>card
{ display:block; width:25%; height:200px; float:left; padding:20px; box-sizing:border-box;
}
#grid_wrapper>card>div
{ cursor:pointer; width:100%; height:100%; position:relative; transition:box-shadow 0.3s; overflow:hidden; border:1px solid rgba(66,76,119,0.1); box-shadow:0px 20px 50px 0px rgba(0,0,0,0.2);
}
#grid_wrapper>card>div:hover
{ box-shadow:0px 30px 60px 0px rgba(0,0,0,0.25);
}
#grid_wrapper>card>div:before
{ width:100%; height:100%; content:""; position:absolute; top:0; left:0; background-size:100%; background-position:50% 50%; background-blend-mode:overlay; background-image:url("https://emersonkeeling.files.wordpress.com/2015/12/ahfod.gif"); background-color:rgba(43,26,119,0.25);
}
#grid_wrapper>card>div:before
{ transition:all 0.2s; -webkit-filter:blur(3px); -moz-filter:blur(3px); filter:blur(3px); -ms-filter:blur(3px); /* background-color:rgba(43, 26, 119, 0.5); */
}
#grid_wrapper>card>div>span
{ width:100%; height:100%; position:relative; display:block; text-align:center; line-height:160px; font-size:1.5em; transition:all 0.5s cubic-bezier(0,0,0,1); transform:scale(1); opacity:1;
}
/*End of Section*/
/*NavBar Style*/
/*Comes up only when you're open in a section*/
nav.main
{ overflow-X:auto; overflow-Y:visible; z-index:+10; position:fixed; top:0; left:0; width:100%; height:55px; display:block; white-space:nowrap;
}
body:after
{ /* background: linear-gradient(90deg, rgba(190,78,114,1) 0%, rgba(254,117,98,1) 33.33%, rgba(86,72,105,1) 66.66%, rgba(126,70,99,1) 100%) */; background: linear-gradient(90deg, rgba(107,208,228,1) 0%, rgba(96,78,177,1) 33%, rgba(200,142,102,1) 66%, rgba(201,85,169,1) 100%); /* w3c */ content:""; position:fixed; width:100%; top:0px; left:0px; height:5px; z-index:+30;
}
nav.main.inactive>.tab
{ transform:rotateX(90deg) translateY(-25px);
}
nav.main>.tab
{ transform-origin:50% 0% 0px; background:#fff; box-sizing:border-box; /* border-top:5px solid; */ font-weight:600; font-size:0.9em; color:#161725; display:inline-block; width:15%; text-align:center; line-height:45px; height:100%; border-top:rgba(0,0,0,0.5) 5px solid; position:relative; cursor:pointer; overflow:hidden; transition:transform 0.5s cubic-bezier(0,0,0,1);
}
nav.main>.tab.active
{ z-index:+5000; background:linear-gradient(#fff,#ccc);
}
nav.main>.tab>span
{ width:100%; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; height:100%; display:block; transform:line-height 0.2s;
}
nav.main>.tab>span:hover
{ background:#cfcfcf;
}
nav.main>.tab.active>span:hover
{ background-color:#aaa;
}
nav.main>.tab:after
{ content:""; top:0; right:0; position:absolute; border-top:0px solid transparent; border-bottom:50px solid transparent; border-right:0px solid rgba(0,0,0,0.1); transition:all 0.2s;
}
nav.main>.tab:hover:after
{ content:""; right:0; position:absolute; border-top:0px solid transparent; border-bottom:55px solid transparent; border-right:10px solid rgba(0,0,0,0.1);
}
/*End of Section*/
/*Ripple Styling*/
.ripple
{ position:fixed; animation:ripple 1s 1 ease-out; background:rgba(0,0,0,0.5); margin:-250px; width:500px; height:500px; transform:scale(10); position:absolute; border-radius:50%; opacity:0;
}
/*One for the BIIIIG ONE!*/
.mega.ripple
{ border-radius:50%; background:rgba(255,255,255,0.1); opacity:1;
}
@keyframes ripple
{ 0%{ opacity:1; transform:scale(0); }
}
/*End of Section*/
/*This one Wraps content of the tabs*/
#content_wrapper.inactive
{ pointer-events:none;
}
#content_wrapper
{ position:fixed; top:0; left:0; height:100%; width:100%; display:block; perspective:1000px;
}
#content_wrapper>div
{ background:linear-gradient(#14151a,#161725); position:fixed; top:0; left:0; display:none; box-sizing:border-box; padding:5%; padding-top:100px; transform-origin:50% 50%; transform:translate(-50%,-50%); animation:flipOpen 0.5s 0s 1 cubic-bezier(0,0,0,1);
}
@keyframes flipOpen
{ from{ transform:translate(-50%,-50%) rotateY(180deg); }
}
#content_wrapper>div>section.active
{ opacity:1; transform:none;
}
#content_wrapper>div>section{ color:#aaa; position:absolute; top:100px; left:5%; opacity:0; transition:all 0.5s; transform:translateY(-100px);
}
#content_wrapper.inactive>button
{ opacity:0;
}
#content_wrapper>button
{ z-index:+100; transition:opacity 0.2s 1s; padding:20px; font-family:"FontAwesome"; color:white; font-size:1.2em; background:none; outline:none; border:none; position:fixed; top:60px; right:0; cursor:pointer;
}
/*End of Section*/

Smooth.tabs - Script Codes JS Codes

$('nav.main>.tab').each(function(index){ $(this).css({'transition-delay':((index*0.1)+'s')});
});
//$('nav.main').removeClass('inactive');
$('nav.main>.tab').click(function(e){ var $ripple=$("<div/>"); $ripple.addClass('ripple'); $ripple.css({left:e.clientX-$(this).offset().left,top:e.clientY-$(this).offset().top}); $(this).append($ripple); setTimeout(function(){ $ripple.remove(); },1000); var $megaRipple=$("<div/>"); $megaRipple.addClass('ripple'); $megaRipple.addClass('mega'); $megaRipple.css({ left:e.clientX, top:e.clientY, background:$(this).css('border-color') }); $('#content_wrapper>div').append($megaRipple); setTimeout(function(){ $megaRipple.animate({opacity:0},1000); setTimeout(function(){ $megaRipple.remove(); },1000); },500); $('nav.main').find('.active').removeClass('active'); $(this).addClass('active');
$('#content_wrapper>div>section').removeClass('active'); $('#content_wrapper>div>section').eq($('nav.main>.tab').index($(this))).addClass('active');
});
hLists=document.getElementsByClassName('hList');
for(var i=0; i<hLists.length;i++) { hLists[i].leftScrollTarget=0; hLists[i].onmousewheel=function(event) { temp=this.leftScrollTarget-(event.wheelDelta*10); if(temp<=0) this.leftScrollTarget=0; else if(temp>=this.scrollWidth-this.clientWidth) this.leftScrollTarget = this.scrollWidth-this.clientWidth; else this.leftScrollTarget = temp; console.log("Scrolled"); event.preventDefault(); }; }
function render(){ window.requestAnimationFrame(render); for(var i=0;i<hLists.length;i++) { hLists[i].scrollLeft+=(hLists[i].leftScrollTarget-hLists[i].scrollLeft)/10; }
}render();
var sections=document.getElementById('home').getElementsByTagName('section');
for(var i=0;i<sections.length;i++) { sections[i].transY=0; }
document.body.onscroll=function(e){ for(var i=0;i<sections.length;i++){ console.log(sections[i].transY+'-'+window.scrollY); sections[i].transY=(i)*parseInt(window.scrollY) sections[i].style.transform='translateY(-'+sections[i].transY+'px)'; }
}
$('#grid_wrapper>card>div').click(function(){ $('#home').css({ transform:"translateY(100px) scale(0.8)" });
$('#content_wrapper').removeClass('inactive'); $('#content_wrapper>div').css({ top:$(this).offset().top+$(this).height()/2, left:$(this).offset().left+$(this).width()/2, height:$(this).height(), width:$(this).width() }).show().animate({ top:'50%', left:'50%', width:'100%', height:'100%' },500); $(this).css({opacity:0}); setTimeout(function(){ $('nav').removeClass('inactive'); },500); setTimeout(function(){ $('#content_wrapper>div>section').removeClass('active');
var $eq=$('#grid_wrapper>card').index($(this).parent()); $('#content_wrapper>div>section').eq($eq).addClass('active'); $('nav.main>.tab').removeClass('active'); $('nav.main>.tab').eq($eq).addClass('active'); },700);
});
$('#content_wrapper>.close').click(function(){ $('nav.main').addClass('inactive'); $('#content_wrapper>div>section').removeClass('active'); $('#home').attr('style',''); setTimeout(function(){ var $eq=$('nav.main>.tab').index('nav.main>.tab.active'); console.log($eq); var $active=$('#grid_wrapper>card').eq($eq).find('div'); console.log($active); $('#content_wrapper>div').animate({ top:$active.offset().top+$active.height()/2, left:$active.offset().left+$active.width()/2, height:$active.height(), width:$active.width(), transform:'translate(-50%,-50%) rotateY(180deg)' },500); },500); $('#content_wrapper').addClass('inactive');
});
Smooth.tabs - Script Codes
Smooth.tabs - Script Codes
Home Page Home
Developer Leolo
Username diomed
Uploaded September 08, 2022
Rating 3
Size 5,110 Kb
Views 40,480
Do you need developer help for Smooth.tabs?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Leolo (diomed) Script Codes
Name
Dropotron
Parallax
Particles.js
Tabulous
Particles.js demo
Portfolio
Vue-carousel-3d v2
Uikit cards
The Man who changed Buddhism
Tribute Page
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!