Skip to content

Instantly share code, notes, and snippets.

@chibaye

chibaye/index.html

Created May 9, 2020 12:50
Show Gist options
  • Save chibaye/21f13faa6bc6ef4074ef0798e4c35fc9 to your computer and use it in GitHub Desktop.
Save chibaye/21f13faa6bc6ef4074ef0798e4c35fc9 to your computer and use it in GitHub Desktop.
Download ZIP
pure css animated tab switch
Raw
index.html
<main>
<h1 class="text-center">Tab Switch</h1>
<div class="wrapper">
<div class="taeb-switch left text-center">
<div class="taeb active" taeb-direction="left">List</div><!--
--><div class="taeb" taeb-direction="right">Map</div>
</div>
</div>
</main>
Raw
pure-css-animated-tab-switch.markdown
Raw
script.js
$(function() {
var taeb = $(".taeb-switch");
taeb.find(".taeb").on("click", function() {
var $this = $(this);
if ($this.hasClass("active")) return;
var direction = $this.attr("taeb-direction");
taeb.removeClass("left right").addClass(direction);
taeb.find(".taeb.active").removeClass("active");
$this.addClass("active");
});
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Raw
style.css
/* taeb-switch styles */
.taeb-switch {
position: relative;
}
.taeb-switch:after {
content: "";
position: absolute;
width: 50%;
top: 0;
transition: left cubic-bezier(.88, -.35, .565, 1.35) .4s;
border-radius: 27.5px;
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .1);
background-color: #3d90ef;
height: 100%;
z-index: 0;
}
.taeb-switch.left:after {
left: 0;
}
.taeb-switch.right:after {
left: 50%;
}
.taeb-switch .taeb {
display: inline-block;
width: 50%;
padding: 12px 0;
z-index: 1;
position: relative;
cursor: pointer;
transition: color 200ms;
font-size: 16px;
font-weight: bold;
line-height: normal;
}
.taeb-switch .taeb.active {
color: #ffffff;
}
/* other styles */
html {
box-sizing: border-box;
}
*,
*:after,
*:before {
box-sizing: inherit;
}
* {
outline: 0;
}
html,
body {
min-height: 100%;
height: 100%;
}
body {
margin: 0;
background-color: #ffffff;
color: #3d90ef;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.text-center {
text-align: center;
}
h1 {
font-size: 38px;
font-weight: bold;
display: block;
width: 100%;
line-height: normal;
margin-top: 0;
margin-bottom: 40px;
}
main {
width: 100%;
}
.wrapper {
border-radius: 37px;
background-color: #f4f4f4;
padding: 8px;
width: 100%;
max-width: 316px;
margin-left: auto;
margin-right: auto;
}
Raw
styles
<link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment