Skip to content

Instantly share code, notes, and snippets.

@hdragomir

hdragomir/shadow-bars.html

Created October 10, 2012 15:41
Show Gist options
  • Save hdragomir/3866427 to your computer and use it in GitHub Desktop.
Save hdragomir/3866427 to your computer and use it in GitHub Desktop.
Download ZIP
shadow bars
Raw
shadow-bars.html
<!doctype html>
<title>background bars proto</title>
<style type="text/css">
.row {
margin: .20em auto;
width: 200px;
position: relative;
font: 14px/22px sans-serif;
color: #333;
background: white;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
}
.row:first-child {
margin-top: 18em;
}
.row .col {
width: 100px;
height: 22px;
text-indent: 10px;
display: inline-block;
box-sizing: border-box;
text-align: center;
}
.limit {
border-left: 1px solid #aaa;
}
.shadow {
position: absolute;
height: 22px;
background: #aaa;
opacity: 0.3;
-webkit-transition: 0.1s all;
-moz-transition: 0.1s all;
-ms-transition: 0.1s all;
-o-transition: 0.1s all;
}
</style>
<body>
<div class="row" data-limit=6.5 data-stop=3.95 data-initial=5>
<span class="col stop">3.95</span><span class="shadow"></span><span class="col limit">6.50</span>
</div>
<div class="row" data-limit=6.5 data-stop=3.95 data-initial=4>
<span class="col stop">3.95</span><span class="shadow"></span><span class="col limit">6.50</span>
</div>
<div class="row" data-limit=6.5 data-stop=3.95 data-initial=5.5>
<span class="col stop">3.95</span><span class="shadow"></span><span class="col limit">6.50</span>
</div>
<div class="row" data-limit=6.5 data-stop=3.95 data-initial=6>
<span class="col stop">3.95</span><span class="shadow"></span><span class="col limit">6.50</span>
</div>
<div class="row" data-limit=6.5 data-stop=3.95 data-initial=5>
<span class="col stop">3.95</span><span class="shadow"></span><span class="col limit">6.50</span>
</div>
<div class="row" data-limit=6.5 data-stop=3.95 data-initial=4>
<span class="col stop">3.95</span><span class="shadow"></span><span class="col limit">6.50</span>
</div>
<div class="row" data-limit=6.5 data-stop=3.95 data-initial=5.5>
<span class="col stop">3.95</span><span class="shadow"></span><span class="col limit">6.50</span>
</div>
<div class="row" data-limit=6.5 data-stop=3.95 data-initial=6>
<span class="col stop">3.95</span><span class="shadow"></span><span class="col limit">6.50</span>
</div>
<script>
(function (doc) {
function setBackground(val, elem, limits) {
var percent;
if (val < limits.initial) {
percent = Math.abs(val - limits.initial) / Math.abs(limits.initial - limits.stop);
elem.style.right = '100px';
elem.style.left = 'auto';
} else {
percent = Math.abs(val - limits.initial) / Math.abs(limits.initial - limits.limit);
elem.style.left = '100px';
elem.style.right = 'auto';
}
elem.style.width = 100 * percent + 'px';
}
function getAppropriateRandomNumber(values) {
return Math.min(Math.random() * Math.abs(values.limit - values.stop) + values.stop, values.limit)
}
function randomize() {
datarows.forEach(function (row) {
setBackground(getAppropriateRandomNumber(row.values), row.shadow, row.values);
});
setTimeout(randomize, 100 + Math.random() * 100); //timeout to account for network overhead
}
var rows = doc.querySelectorAll('.row'),
datarows = [];
[].forEach.call(doc.querySelectorAll('.row'), function (row) {
var values = function (vals) {
var values = {},
prop;
for (prop in vals) {
if (vals.hasOwnProperty(prop)) {
values[prop] = parseFloat(vals[prop]);
}
}
return values;
} (row.dataset),
shadow = row.querySelector('.shadow');
datarows.push({
row: row,
values: values,
shadow: shadow
});
});
randomize();
} (document));
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment