Skip to content

Instantly share code, notes, and snippets.

@ikonikre
Created November 5, 2016 01:13
Show Gist options
  • Save ikonikre/822ca16f0abd625727fff6231513a002 to your computer and use it in GitHub Desktop.
Save ikonikre/822ca16f0abd625727fff6231513a002 to your computer and use it in GitHub Desktop.
They call it le Big-Mac
<div class='container'>
<div class='burger'>
<div class='burger__line-top'></div>
<div class='burger__line-mid'></div>
<div class='burger__menu'>
<p>MENU</p>
</div>
</div>
<div class='stuff'><a href='http://codepen.io/mrspok407/' class='pens' target="_blank">Check out my other pens</a><a href="https://twitter.com/mrspok407" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a></div>
</div>
$(document).ready(function() {
var $burger = $('.burger'),
$topLine = $('.burger__line-top'),
$midLine = $('.burger__line-mid'),
$menuLine = $('.burger__menu'),
anim = false;
var changeClasses = {
addActive: function() {
for (var i = 0; i <= 2; i++) {
$burger.children().eq(i).removeClass('reverseLine' + (i + 1)).addClass('activeLine' + (i + 1));
}
},
addReverse: function() {
for (var i = 0; i <= 2; i++) {
$burger.children().eq(i).removeClass('activeLine' + (i + 1)).addClass('reverseLine' + (i + 1));
}
}
}
var timeouts = {
initial: function(child, Y, rot, scale) {
$burger.children().eq(child).css('transform', 'translateY(' + Y + 'px) rotate(' + rot + 'deg) scale(' + scale + ',1)');
},
afterActive: function() {
// ES6
setTimeout(()=> {
this.initial(0, 12, 45, 1.40);
this.initial(1, -12, -45, 1.40);
this.initial(2, 35, 0, 1);
$burger.children().eq(2).css('opacity', '0');
anim = true;
}, 1300);
// With bind()
// setTimeout(function() {
// this.initial(0, 12, 45, 1.40);
// this.initial(1, -12, -45, 1.40);
// this.initial(2, 35, 0, 1);
// $burger.children().eq(2).css('opacity', '0');
// anim = true;
// }.bind(this), 1300);
},
beforeReverse: function() {
setTimeout(()=> {
for (var i = 0; i <= 2; i++) {
this.initial(i, 0, 0, 1);
}
$burger.children().eq(2).css('opacity', '1');
anim = false;
}, 1300);
}
}
$burger.on('click', function() {
if (!anim) {
changeClasses.addActive();
timeouts.afterActive();
} else if (anim) {
changeClasses.addReverse();
timeouts.beforeReverse();
}
});
});
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
*,
*:after,
*:before {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.stuff {
position: absolute;
bottom: 30px;
width: 100%;
text-align: center;
.pens {
margin-right: 20px;
text-decoration: none;
font-size: 20px;
font-family: 'Open Sans', sans serif;
color: #f2f2f2;
&:hover {
text-decoration: underline;
}
}
.fa-twitter {
position: relative;
top: 8px;
color: #1DA1F2;
font-size: 50px;
}
}
.container {
width: 100%;
height: 100vh;
background-color: #FF6100;
}
.activeLine1 {
transform-origin: left center;
animation: activeTop 1.3s forwards;
@keyframes activeTop {
20% {
transform: translateY(-6px) rotate(0deg)
}
40% {
transform: translateY(15px) rotate(48deg) scale(1.40, 1)
}
60% {
transform: translateY(7px) rotate(42deg) scale(1.40, 1)
}
100% {
transform: translateY(12px) rotate(45deg) scale(1.40, 1)
}
}
}
.activeLine2 {
transform-origin: right center;
animation: activeMid 1.3s forwards;
@keyframes activeMid {
20% {
transform: translateY(-8px) rotate(0deg)
}
40% {
transform: translateY(-3px) rotate(-45deg) scale(1.30, 1)
}
60% {
transform: translateY(-18px) rotate(-45deg) scale(1.40, 1)
}
100% {
transform: translateY(-12px) rotate(-45deg) scale(1.40, 1)
}
}
}
.activeLine3 {
animation: activeMenu .5s forwards;
@keyframes activeMenu {
40% {
transform: translateY(-7px);
opacity: 1
}
60% {
transform: translateY(-7px);
opacity: 1
}
70% {
opacity: 1
}
100% {
transform: translateY(35px);
opacity: 0
}
}
}
.reverseLine1 {
transform-origin: left center;
animation: reverseTop 1.5s forwards;
@keyframes reverseTop {
15% {
transform: translateY(3px) rotate(-3deg) scale(1, 1)
}
30% {
transform: translateY(-14px) rotate(-10deg) scale(1, 1)
}
40% {
transform: translateY(4px) rotate(5deg) scale(1, 1)
}
60% {
transform: translateY(-2px) rotate(-3deg) scale(1, 1)
}
100% {
transform: translateY(0px) rotate(0deg)
}
}
}
.reverseLine2 {
transform-origin: right center;
animation: reverseMid 1.5s forwards;
@keyframes reverseMid {
20% {
transform: translateY(0px) rotate(13deg) scale(1, 1)
}
40% {
transform: translateY(-6px) rotate(-9deg) scale(1, 1)
}
60% {
transform: translateY(8px) rotate(6deg) scale(1, 1)
}
100% {
transform: translateY(0px) rotate(0deg)
}
}
}
.reverseLine3 {
transform-origin: right center;
animation: reverseMenu 1.65s forwards;
@keyframes reverseMenu {
30% {
transform: translateY(-20px) rotate(0deg) scale(1, 1);
opacity: 1;
}
40% {
transform: translateY(9px) rotate(-10deg) scale(1, 1);
opacity: 1;
}
60% {
transform: translateY(-5px) rotate(5deg) scale(1, 1);
opacity: 1;
}
100% {
transform: translateY(0px) rotate(0deg);
opacity: 1;
}
}
}
.burger {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 71px;
height: 71px;
cursor: pointer;
&__line-top {
width: 100%;
height: 8px;
border-radius: 5px;
background-color: #fff;
box-shadow: 0 0 1px 0 #fff;
}
&__line-mid {
margin-top: 17px;
width: 100%;
height: 8px;
border-radius: 5px;
background-color: #fff;
box-shadow: 0 0 1px 0 #fff;
}
&__menu {
margin-top: 10px;
p {
text-align: center;
font: {
size: 20px;
family: 'Open Sans', sans-serif;
weight: 900;
}
color: #fff;
text-shadow: 0 0 1px #fff;
letter-spacing: 3px;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment