Skip to content

Instantly share code, notes, and snippets.

@mocon

mocon/index.html

Last active December 5, 2015 18:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mocon/e68a71318e0d53edc833 to your computer and use it in GitHub Desktop.
Save mocon/e68a71318e0d53edc833 to your computer and use it in GitHub Desktop.
Download ZIP
"Like" button animation, as seen on Medium
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Medium Animation Experiment</title>
<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='//fonts.googleapis.com/css?family=Open+Sans' type='text/css'>
<style>
body {
padding: 100px;
font-size: 60px;
text-align: center;
font-family: 'Open Sans', sans-serif;
-webkit-user-select: none;
user-select: none;
}
i {
cursor: pointer;
color: #333;
}
.fa-heart {
color: green;
animation: pulse 0.25s linear;
}
@keyframes pulse {
0% {transform: scale(1);}
10% {transform: scale(.8);}
70% {transform: scale(1.1);}
100% {transform: scale(1);}
}
</style>
</head>
<body>
<div>
<i id="heart" class="fa fa-heart-o"></i> <span id="count"></span>
</div>
<script>
var icon = document.getElementById("heart"),
likes = document.getElementById("count"),
count = 1;
icon.onclick = function(){
if (this.className === "fa fa-heart-o") {
this.setAttribute("class", "fa fa-heart");
count ++;
updateCount();
} else {
this.setAttribute("class", "fa fa-heart-o");
count --;
updateCount();
}
};
function updateCount(){
likes.innerHTML = count;
};
updateCount();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment