@mixin object($width, $height, $bg) {
width: $width;
height: $height;
background: $bg;
}
@mixin transPos($top, $right, $bottom, $left,$transX,$transY) {
position: absolute;
top: $top;
left: $left;
right: $right;
bottom: $bottom;
transform:translate($transX,$transY);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
height:100vh;
display:flex;
justify-content:center;
align-items:center;
}
.snap {
@include object(350px,350px,#E85D5E);
border-radius:0 0 30px 30px;
display:flex;
overflow:hidden;
box-shadow:0 10px 90px -2px rgba(#000,0.3);
position:relative;
.tab-panel {
@include object(100%,60px,null);
display:flex;
flex-direction:row;
align-self:flex-end;
line-height: 70px;
text-align:center;
color:#fff;
position:relative;
z-index: 100;
.tab{
flex-grow:1;
height:60px;
cursor:pointer;
&:nth-child(2) {
position:relative;
.camera {
content:'';
@include object(60px,60px,null);
@include transPos(-60px,null,null,25%,null,null);
z-index: 10;
border:7px solid #fff;
border-radius:50%;
}
}
}
}
.active {
@include object(60px,5px,#fff);
@include transPos(null,null,0,50%,-50%,0);
border-radius:30px 30px 0 0;
z-index: 100;
}
.yellow {
@include object(100%,100%,#ED994D);
@include transPos(0,-100%,null,null,null,null);
}
.blue {
@include object(100%,100%,#24CEC2);
@include transPos(0,null,null,-100%,null,null);
}
}
a {
text-decoration:none;
color:#24CEC2;
@include transPos(null,2vh,2vh,null,null,null);
animation:ls 1s ease-in-out infinite;
@keyframes ls{
50%{
letter-spacing:0.5px;
}
}
}
View Compiled
var active = $('.active'),
firstTab = $('.tab:nth-child(1)'),
secondTab = $('.tab:nth-child(2)'),
thirdTab = $('.tab:nth-child(3)'),
yellowBg= $('.yellow'),
blueBg = $('.blue'),
snap = $('.snap'),
sort = $('.sort');
firstTab.on('click',function(){
active.animate({
left:'24%'
});
secondTab.animate({
marginTop:'50px'
});
yellowBg.animate({
right:'-100%'
});
blueBg.animate({
left:'0'
});
$('.camera').animate({
left:'17%'
});
snap.animate({
padding:'0 40px 0 40px'
});
sort.animate({
marginLeft:'20px'
});
});
secondTab.on('click',function(){
active.animate({
left:'50%'
});
$(this).animate({
marginTop:'0'
});
$('.camera').animate({
left:'25%'
});
yellowBg.animate({
right:'-100%'
});
blueBg.animate({
left:'-100%'
});
snap.animate({
padding:'0'
});
sort.animate({
marginLeft:'0'
});
});
thirdTab.on('click',function(){
active.animate({
left:'75%'
});
secondTab.animate({
marginTop:'50px'
});
$('.camera').animate({
left:'17%'
});
yellowBg.animate({
right:'0'
});
blueBg.animate({
left:'-100%'
});
snap.animate({
padding:'0 40px 0 40px'
});
sort.animate({
marginLeft:'20px'
});
});