Skip to content

Instantly share code, notes, and snippets.

@scribu

scribu/index.html

Last active August 29, 2015 14:14
Show Gist options
  • Save scribu/66707154ba0335310295 to your computer and use it in GitHub Desktop.
Save scribu/66707154ba0335310295 to your computer and use it in GitHub Desktop.
Download ZIP
Negative Feedback
Raw
index.html
<html>
<head>
<title>Negative Feedback</title>
<style>
body {
background: black;
}
.half {
float: left;
width: 50%;
}
.bar {
height: 20px;
width: 0;
padding: 0;
}
#blue-bar {
background-color: turquoise;
float: right;
}
#orange-bar {
background-color: orange;
}
</style>
</head>
<body>
<div class="half">
<div class="bar" id="blue-bar"></div>
</div>
<div class="half">
<div class="bar" id="orange-bar"></div>
</div>
<script type="text/javascript">
var THRESHOLD = 500;
var PROPULSION = 10;
var blueBar = document.getElementById('blue-bar'),
orangeBar = document.getElementById('orange-bar');
function getDistance(bar) {
return bar.offsetWidth;
}
function setDistance(bar, width) {
bar.style.width = width + 'px';
}
function updateBlueBar(counterBalance) {
var dampening = (THRESHOLD - counterBalance * 10) / THRESHOLD;
setDistance(blueBar, getDistance(blueBar) + PROPULSION * dampening);
}
function updateOrangeBar(curVal) {
if (curVal >= THRESHOLD / 2) {
setDistance(orangeBar, Math.min(THRESHOLD, getDistance(orangeBar) + 1));
} else {
setDistance(orangeBar, Math.max(0, getDistance(orangeBar) - 1));
}
}
function animate() {
updateBlueBar(getDistance(orangeBar));
updateOrangeBar(getDistance(blueBar));
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment