Skip to content

Instantly share code, notes, and snippets.

@sbarratt

sbarratt/scrolltest.html

Created July 25, 2016 06:07
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 sbarratt/25d29f73595aa5a79dfaf5cc17525523 to your computer and use it in GitHub Desktop.
Save sbarratt/25d29f73595aa5a79dfaf5cc17525523 to your computer and use it in GitHub Desktop.
Download ZIP
Scroll through a list of items nicely.
Raw
scrolltest.html
<html>
<head>
<style>
#content {
font-size: 18;
text-align: center;
padding-top: 150px;
}
.blurry-text {
color: transparent;
text-shadow: 0 0 0.5px rgba(0,0,0,0.7);
}
</style>
</head>
<body>
<div id="content">
<span id="data" class=""></span>
</div>
</body>
<script>
data = ["1", "2", "3", "4", "5", "6", "7", "8"]
half_window_size = 1;
data_idx = half_window_size;
function updateData() {
data_element = document.getElementById("data");
data_element.innerHTML = "";
for (i = data_idx - half_window_size; i <= data_idx + half_window_size; i++) {
if (i == data_idx) {
data_element.innerHTML += data[i];
} else {
data_element.innerHTML += "<span class=\"blurry-text\">" + data[i] + "</span>";
}
data_element.innerHTML += "<br \\>";
}
}
function checkKey(e) {
UP = '38';
DOWN = '40';
e = e || window.event;
if (e.keyCode == UP) {
if (data_idx > half_window_size) {
data_idx -= 1;
}
}
else if (e.keyCode == DOWN) {
if (data_idx < data.length - half_window_size - 1) {
data_idx += 1;
}
}
updateData();
}
document.onkeydown = checkKey;
updateData();
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment