Skip to content

Instantly share code, notes, and snippets.

@omniosi

omniosi/index.html

Created June 8, 2015 08:38
Show Gist options
  • Save omniosi/8e15485d219798cecee0 to your computer and use it in GitHub Desktop.
Save omniosi/8e15485d219798cecee0 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/kudoqaneve
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.image{
width: 30px;
/*width: 0;*/
height: 10px;
/*height:0;*/
/*background: grey;*/
/*border-radius: 40px;*/
/*border-left:20px solid grey;*/
/*border-right:none;*/
border: solid transparent;
border-left-color: grey;
border-width: 20px;
}
.sway{
animation: sway 1s ease-in-out infinite alternate;
}
@keyframes sway { from {
margin-left:-200%;
transform: rotate(115deg);
} to {
margin-left:200%;
transform: rotate(30deg);
} }
.drop{
position: relative;
position: absolute;
top: -20%;
left: 50%;
/*animation: drop 2s ease-out;*/
animation: drop 7s ease-in-out infinite;
}
@keyframes drop { from { top:-20%; } to { top:100%; } }
</style>
</head>
<body>
<button id="egg">$</button>
<div class="drop">
<div class="sway">
<div class="image"></div>
</div>
</div>
<script id="jsbin-javascript">
var egg = document.getElementById("egg");
egg.onclick = function(e){
document.body.innerHTML += '<div class="drop"><div class="sway"><div class="image"></div></div></div>';
console.log("a new bill fired.");
};
</script>
<script id="jsbin-source-css" type="text/css">.image{
width: 30px;
/*width: 0;*/
height: 10px;
/*height:0;*/
/*background: grey;*/
/*border-radius: 40px;*/
/*border-left:20px solid grey;*/
/*border-right:none;*/
border: solid transparent;
border-left-color: grey;
border-width: 20px;
}
.sway{
animation: sway 1s ease-in-out infinite alternate;
}
@keyframes sway { from {
margin-left:-200%;
transform: rotate(115deg);
} to {
margin-left:200%;
transform: rotate(30deg);
} }
.drop{
position: relative;
position: absolute;
top: -20%;
left: 50%;
/*animation: drop 2s ease-out;*/
animation: drop 7s ease-in-out infinite;
}
@keyframes drop { from { top:-20%; } to { top:100%; } }</script>
<script id="jsbin-source-javascript" type="text/javascript">var egg = document.getElementById("egg");
egg.onclick = function(e){
document.body.innerHTML += '<div class="drop"><div class="sway"><div class="image"></div></div></div>';
console.log("a new bill fired.");
};</script></body>
</html>
Raw
jsbin.kudoqaneve.css
.image{
width: 30px;
/*width: 0;*/
height: 10px;
/*height:0;*/
/*background: grey;*/
/*border-radius: 40px;*/
/*border-left:20px solid grey;*/
/*border-right:none;*/
border: solid transparent;
border-left-color: grey;
border-width: 20px;
}
.sway{
animation: sway 1s ease-in-out infinite alternate;
}
@keyframes sway { from {
margin-left:-200%;
transform: rotate(115deg);
} to {
margin-left:200%;
transform: rotate(30deg);
} }
.drop{
position: relative;
position: absolute;
top: -20%;
left: 50%;
/*animation: drop 2s ease-out;*/
animation: drop 7s ease-in-out infinite;
}
@keyframes drop { from { top:-20%; } to { top:100%; } }
Raw
jsbin.kudoqaneve.js
var egg = document.getElementById("egg");
egg.onclick = function(e){
document.body.innerHTML += '<div class="drop"><div class="sway"><div class="image"></div></div></div>';
console.log("a new bill fired.");
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment