Created
May 3, 2016 15:52
-
-
Save wbamberg/1621985709b924c3d126fceaa3d22c57 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<style> | |
#container { | |
margin: 0.5em; | |
padding: 0.5em; | |
box-shadow: 1px 1px 5px #808080; | |
} | |
.channel { | |
margin: 1em 1em; | |
} | |
.channel > * { | |
vertical-align: middle; | |
line-height: normal; | |
} | |
.channel-icon { | |
width: 50px; | |
height: 50px; | |
filter: grayscale(100%); | |
} | |
.channel-note { | |
margin-left: 1em; | |
font: 1.5em "Open Sans",Arial,sans-serif; | |
overflow: hidden; | |
white-space: nowrap; | |
display: inline-block; | |
opacity: 0; | |
width: 0; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="container"> | |
<div class="channel"> | |
<img src="https://mdn.mozillademos.org/files/11827/developer.png" id="developer-edition-icon" class="channel-icon"/> | |
<span class="channel-note" id="developer-edition-note">Firefox Developer Edition</span> | |
</div> | |
</div> | |
<script type="text/javascript"> | |
var selectingIconKeyframes = [ | |
{ transform: 'scale(1)', filter: 'grayscale(100%)'}, | |
{ filter: 'grayscale(100%)', offset: 0.333}, | |
{ transform: 'scale(1.5)', offset: 0.666 }, | |
{ transform: 'scale(1.5)', filter: 'grayscale(0%)'} | |
]; | |
var selectingNoteKeyframes = [ | |
{ opacity: '0', width: '0'}, | |
{ opacity: '1', width: '300px'} | |
]; | |
var iconAnimationOptions = { | |
duration: 750, | |
fill: 'forwards', | |
easing: 'ease-in', | |
delay: 150, | |
endDelay: 100 | |
} | |
var noteAnimationOptions = { | |
duration: 500, | |
fill: 'forwards', | |
easing: 'ease-in' | |
} | |
var animations; | |
function initializeAnimations() { | |
var icon = document.getElementById("developer-edition-icon"); | |
var note = document.getElementById("developer-edition-note"); | |
animations = {}; | |
animations.iconAnimation = icon.animate(selectingIconKeyframes, iconAnimationOptions); | |
animations.iconAnimation.finished.then(()=>{animations.noteAnimation = note.animate(selectingNoteKeyframes, noteAnimationOptions)}); | |
return animations; | |
} | |
document.addEventListener("click", animateChannel); | |
function animateChannel(e) { | |
if (!e.target.classList.contains("channel-icon")) { | |
return; | |
} | |
if (!animations) { | |
animations = initializeAnimations(); | |
} else { | |
animations.iconAnimation.reverse(); | |
animations.iconAnimation.finished.then(()=>{animations.noteAnimation.reverse()}); | |
; | |
} | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment