Skip to content

Instantly share code, notes, and snippets.

@bogdananton

bogdananton/index.html

Created October 13, 2017 09:06
Show Gist options
  • Save bogdananton/91c3c14c242018831f3ccea22f997e0e to your computer and use it in GitHub Desktop.
Save bogdananton/91c3c14c242018831f3ccea22f997e0e to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/xifuzokude
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/q.js/0.9.2/q.js"></script>
<style id="jsbin-css">
body {
padding: 100px;
font-family: 'Press Start 2P', cursive;
}
.me {
opacity: 0;
position: absolute;
font-size: 48px;
height: 48px;
width: 48px;
text-align: center;
-webkit-text-stroke: 1px black;
color: #3498db;
text-shadow:
3px 3px 0 #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
</style>
</head>
<body>
<script id="jsbin-javascript">
var bodyEl = $('body');
var i = 0;
var golden = 8 / 13;
var deltaY = 500;
var deltaX = deltaY / 10; // or whatever. when value is too high, it looks like it's zigging and zagging (the path is not a curve)
var deltaTimeout = deltaY; // or whatever
function createNumber(number) {
return $('<span class="me">' + number + '</span>');
}
function move(element, x, y, time) {
var deferred = Q.defer();
var options = {
opacity: 1,
left: (x > 0 ? "+" : "-") + "=" + Math.abs(x),
top: (y > 0 ? "+" : "-") + "=" + Math.abs(y)
};
console.log(options, time);
element.animate(options, time, function() {
deferred.resolve({x: x, y: y, time: time});
});
return deferred.promise;
}
function boing(element, x, y, time) {
var deferred = Q.defer();
x = x * golden;
y = y * golden;
time = time * golden;
move(element, x, -1 * y, time)
.then(function() { return move(element, x, y, time); } )
.then(function() { deferred.resolve({x: x, y: y, time: time}); });
return deferred.promise;
}
function animate(element) {
element.css({top: 200, left: 200});
// go left or right
var offsetX = (Math.floor((Math.random() * 100)) % 2 - 0.5) * 2 * deltaX;
move(element, 0, -1 * deltaY / 3, deltaTimeout / 3)
.then(function() { return move(element, offsetX, deltaY, deltaTimeout); })
.then(function(o) { return boing(element, o.x, o.y, o.time); })
.then(function(o) { return boing(element, o.x, o.y, o.time); })
.then(function(o) { element.animate({opacity: 0}, o.time * 2);});
return element;
}
$(document).ready(function() {
setInterval(function() {
bodyEl.append(animate(createNumber(++i)));
}, 1500);
});
</script>
<script id="jsbin-source-css" type="text/css">body {
padding: 100px;
font-family: 'Press Start 2P', cursive;
}
.me {
opacity: 0;
position: absolute;
font-size: 48px;
height: 48px;
width: 48px;
text-align: center;
-webkit-text-stroke: 1px black;
color: #3498db;
text-shadow:
3px 3px 0 #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">var bodyEl = $('body');
var i = 0;
var golden = 8 / 13;
var deltaY = 500;
var deltaX = deltaY / 10; // or whatever. when value is too high, it looks like it's zigging and zagging (the path is not a curve)
var deltaTimeout = deltaY; // or whatever
function createNumber(number) {
return $('<span class="me">' + number + '</span>');
}
function move(element, x, y, time) {
var deferred = Q.defer();
var options = {
opacity: 1,
left: (x > 0 ? "+" : "-") + "=" + Math.abs(x),
top: (y > 0 ? "+" : "-") + "=" + Math.abs(y)
};
console.log(options, time);
element.animate(options, time, function() {
deferred.resolve({x: x, y: y, time: time});
});
return deferred.promise;
}
function boing(element, x, y, time) {
var deferred = Q.defer();
x = x * golden;
y = y * golden;
time = time * golden;
move(element, x, -1 * y, time)
.then(function() { return move(element, x, y, time); } )
.then(function() { deferred.resolve({x: x, y: y, time: time}); });
return deferred.promise;
}
function animate(element) {
element.css({top: 200, left: 200});
// go left or right
var offsetX = (Math.floor((Math.random() * 100)) % 2 - 0.5) * 2 * deltaX;
move(element, 0, -1 * deltaY / 3, deltaTimeout / 3)
.then(function() { return move(element, offsetX, deltaY, deltaTimeout); })
.then(function(o) { return boing(element, o.x, o.y, o.time); })
.then(function(o) { return boing(element, o.x, o.y, o.time); })
.then(function(o) { element.animate({opacity: 0}, o.time * 2);});
return element;
}
$(document).ready(function() {
setInterval(function() {
bodyEl.append(animate(createNumber(++i)));
}, 1500);
});
</script></body>
</html>
Raw
jsbin.xifuzokude.css
body {
padding: 100px;
font-family: 'Press Start 2P', cursive;
}
.me {
opacity: 0;
position: absolute;
font-size: 48px;
height: 48px;
width: 48px;
text-align: center;
-webkit-text-stroke: 1px black;
color: #3498db;
text-shadow:
3px 3px 0 #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
Raw
jsbin.xifuzokude.js
var bodyEl = $('body');
var i = 0;
var golden = 8 / 13;
var deltaY = 500;
var deltaX = deltaY / 10; // or whatever. when value is too high, it looks like it's zigging and zagging (the path is not a curve)
var deltaTimeout = deltaY; // or whatever
function createNumber(number) {
return $('<span class="me">' + number + '</span>');
}
function move(element, x, y, time) {
var deferred = Q.defer();
var options = {
opacity: 1,
left: (x > 0 ? "+" : "-") + "=" + Math.abs(x),
top: (y > 0 ? "+" : "-") + "=" + Math.abs(y)
};
console.log(options, time);
element.animate(options, time, function() {
deferred.resolve({x: x, y: y, time: time});
});
return deferred.promise;
}
function boing(element, x, y, time) {
var deferred = Q.defer();
x = x * golden;
y = y * golden;
time = time * golden;
move(element, x, -1 * y, time)
.then(function() { return move(element, x, y, time); } )
.then(function() { deferred.resolve({x: x, y: y, time: time}); });
return deferred.promise;
}
function animate(element) {
element.css({top: 200, left: 200});
// go left or right
var offsetX = (Math.floor((Math.random() * 100)) % 2 - 0.5) * 2 * deltaX;
move(element, 0, -1 * deltaY / 3, deltaTimeout / 3)
.then(function() { return move(element, offsetX, deltaY, deltaTimeout); })
.then(function(o) { return boing(element, o.x, o.y, o.time); })
.then(function(o) { return boing(element, o.x, o.y, o.time); })
.then(function(o) { element.animate({opacity: 0}, o.time * 2);});
return element;
}
$(document).ready(function() {
setInterval(function() {
bodyEl.append(animate(createNumber(++i)));
}, 1500);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment