Skip to content

Instantly share code, notes, and snippets.

@xbeat

xbeat/index.html

Created January 29, 2018 21:53
Show Gist options
  • Save xbeat/f0476c3298ea472d2f7f4407690a1e19 to your computer and use it in GitHub Desktop.
Save xbeat/f0476c3298ea472d2f7f4407690a1e19 to your computer and use it in GitHub Desktop.
Download ZIP
Modern Animated Menu in Vanilla Javascript
Raw
index.html
<head>
<meta charset="UTF-8">
<title>xbeat Interface</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="skill" class="skill">
<div id="cross-close" class="cross-close">&larr;</div>
<div class="skill-wrapp lost">
<div class="skill-value">
<p>20.00</p>
<div class="letter-holder">
Off-side
</div>
</div>
</div>
<div class="skill-wrapp lost">
<div class="skill-value">
<p>15.00</p>
<div class="letter-holder">
Pressing
</div>
</div>
</div>
<div class="skill-wrapp lost">
<div class="skill-value">
<p>18.00</p>
<div class="letter-holder">
Aggressive defense
</div>
</div>
</div>
<div class="skill-wrapp gain">
<div class="skill-value">
<p>17.00</p>
<div class="letter-holder">
Clearance
</div>
</div>
</div>
<div class="skill-wrapp lost">
<div class="skill-value">
<p>20.00</p>
<div class="letter-holder">
Defensive possesion
</div>
</div>
</div>
<div class="skill-wrapp gain">
<div class="skill-value">
<p>15.00</p>
<div class="letter-holder">
Wing play
</div>
</div>
</div>
<div class="skill-wrapp gain">
<div class="skill-value">
<p>11.00</p>
<div class="letter-holder">
Through ball
</div>
</div>
</div>
<div class="skill-wrapp gain">
<div class="skill-value">
<p>20.00</p>
<div class="letter-holder">
Give-and-go offense
</div>
</div>
</div>
<div class="skill-wrapp lost">
<div class="skill-value">
<p>18.00</p>
<div class="letter-holder">
Direct football
</div>
</div>
</div>
<div class="skill-wrapp gain">
<div class="skill-value">
<p>12.00</p>
<div class="letter-holder">
Rehearsed moves
</div>
</div>
</div>
</div>
</body>
Raw
script.js
var selects = document.getElementsByClassName( "skill-wrapp" );
document.getElementsByClassName( "cross-close" )[ 0 ].addEventListener( "click", function(){
if ( document.getElementById( "skill" ).classList.contains( "shrink-skill" ) ){
for( let i = 0, il = selects.length; i < il; i++ ){
selects[i].style.transition = "opacity .3s linear 1.5s";
selects[i].style.opacity = "1";
};
document.getElementById( "skill" ).classList.remove("shrink-skill");
document.getElementById( "skill" ).style.width = "10px";
document.getElementById( "skill" ).style.transition = "background .2s linear .1s";
document.getElementById( "skill" ).style.background = "rgba( 78, 78, 78, 1 )";
document.getElementById( "skill" ).style.animation = "expand .5s linear .8s forwards";
document.getElementById( "cross-close" ).style.transform = "rotate(180deg)";
document.getElementById( "cross-close" ).style.left = "900px";
document.getElementById( "cross-close" ).style.transition = "left .5s linear .8s";
document.getElementById( "cross-close" ).style.animation = "unspin .5s linear 1.8s forwards";
} else {
for( let i = 0, il = selects.length; i < il; i++ ){
selects[i].style.transition = "opacity .3s linear .1s";
selects[i].style.opacity = "0";
};
document.getElementById( "skill" ).classList.add("shrink-skill");
document.getElementById( "skill" ).style.width = "890px";
document.getElementById( "skill" ).style.transition = "background .2s linear 1.5s";
document.getElementById( "skill" ).style.background = "rgba( 78, 78, 78, 0 )";
document.getElementById( "skill" ).style.animation = "shrink .5s linear .5s forwards";
document.getElementById( "cross-close" ).style.transform = "rotate(0deg)";
document.getElementById( "cross-close" ).style.left = "5px";
document.getElementById( "cross-close" ).style.transition = "left .5s linear .5s";
document.getElementById( "cross-close" ).style.animation = "spin .5s linear 1.8s forwards";
};
});
for( let i = 0, il = selects.length; i < il; i++ ){
selects[i].addEventListener( "mouseenter", function( event ) {
this.style.transition = "all .3s";
this.style.transform = "scale( 1.1 )";
this.style.cursor = "pointer";
});
selects[i].addEventListener( "mouseleave", function( event ) {
this.style.transition = "all .3s";
this.style.transform = "scale( 1 )";
this.style.cursor = "none";
});
};
Raw
style.css
@import url('https://fonts.googleapis.com/css?family=Miriam+Libre');
body {
margin: 0 auto;
padding: 20px;
font-family: 'Miriam Libre', sans-serif;
font-size: 20px;
font-weight: 500;
color: #777;
background-color: #111;
}
.skill {
position: absolute;
left: 20px;
bottom: 20px;
padding: 15px;
background-color: rgba( 78, 78, 78, 0.6 );
animation: pop .55s;
border-radius: 5px;
display: flex;
width: 890px;
}
.skill-wrapp {
width: 80px;
height: 90px;
margin: 0 10px 0 0;
border-radius: 5px;
background-color: #d8d8d8;
flex-shrink: 0;
flex-grow: 0;
}
.skill-wrapp p {
margin: 0;
text-align: center;
}
.skill-value {
margin: 10px 0 0 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.skill-wrapp.lost {
background-color: #f55d5d;
background-image: linear-gradient( 45deg, #f55d5d 0%, #de4e38 100% );
color: #eee;
}
.skill-wrapp.gain {
background-color: #85FFBD;
background-image: linear-gradient( 45deg, #85FFBD 0%, #FFFB7D 100% );
color: #111;
}
.letter-holder {
font-size: 12px;
text-align: center;
}
@keyframes shrink {
0% {
width: 890px;
}
100% {
width: 10px;
}
}
@keyframes expand {
0% {
width: 10px;
}
100% {
width: 890px;
}
}
@keyframes pop {
0% {
transform: scale( 0.8 );
}
80% {
transform: scale( 1.1 );
}
90% {
transform: scale( 0.95 );
}
100% {
transform: scale( 1 );
}
}
.cross-close {
font-weight: bolder;
font-size: 15px;
border-radius: 50%;
height: 30px;
width: 30px;
text-align: center;
line-height: 32px;
position: absolute;
left: 900px;
top: -15px;
background-color: rgb( 78, 78, 78 );
color: #ddd;
transition: all .5s;
}
.cross-close:hover {
color: #222;
background-color: rgb( 255, 255, 255 );
cursor: pointer;
}
@keyframes spin {
0% {
transform:rotate( 0deg );
}
100% {
transform:rotate( 180deg );
}
}
@keyframes unspin {
0% {
transform:rotate( 180deg );
}
100% {
transform:rotate( 0deg );
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment