Created
July 10, 2015 15:36
-
-
Save thomaswilburn/66d9b4519fd4641106ff to your computer and use it in GitHub Desktop.
Weekly JS Challenge #1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Weekly JS Challenge #1</title> | |
| <style> | |
| .movie-container { | |
| display: flex; | |
| background: #333; | |
| max-width: 620px; | |
| } | |
| .button { | |
| flex: 0 0 40px; | |
| font-size: 48px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| color: #CCC; | |
| text-align: center; | |
| background: black; | |
| cursor: pointer; | |
| } | |
| .button:hover { | |
| color: white; | |
| } | |
| .movie-list { | |
| flex: 1 0 0%; | |
| padding: 0; | |
| margin: 0; | |
| list-style-type: none; | |
| display: flex; | |
| overflow: hidden; | |
| } | |
| .movie-list li { | |
| flex: 0 0 75px; | |
| margin: 0 4px; | |
| display: flex; | |
| flex-direction: column; | |
| height: 100px; | |
| width: 75px; | |
| background: rgba(255, 255, 255, .4); | |
| justify-content: center; | |
| text-align: center; | |
| padding: 4px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="movie-container"> | |
| <a class="button previous">«</a> | |
| <ul class="movie-list"> | |
| <li> Air Bud | |
| <li> The Room | |
| <li> Magic Mike | |
| <li> Manos: The Hands of Fate | |
| <li> The Human Centipede | |
| <li> A Deadly Adoption | |
| <li> Revenge of the Clones | |
| <li> That's So Raven | |
| <li> Scanners | |
| <li> Police Academy 4 | |
| <li> Nova: Honey Badgers | |
| <li> Fast Food Nation | |
| <li> The Breakfast Club | |
| <li> Eraserhead | |
| </ul> | |
| <a class="button next">»</a> | |
| </div> | |
| <script> | |
| // YOUR SCRIPT GOES HERE | |
| </script> | |
| </body> | |
| </html> |
This one adds animation, albeit with an easing function that's only halfway decent.
(function() {
var animate = (function() {
var animating = [];
return function(target, duration, to) {
if (animating.indexOf(target) > -1) return;
animating.push(target);
var start = Date.now();
var from = {};
for (var key in to) from[key] = target[key];
var ease = function(a, b, ratio) {
if (ratio < .5) return (b - a) * 2 * (ratio * ratio) + a;
return a + (b - a) * ratio;
}
var tick = function() {
var elapsed = Date.now() - start;
var ratio = elapsed / duration;
if (ratio > 1) ratio = 1;
for (var key in to) {
target[key] = ease(from[key], to[key], ratio);
}
if (ratio < 1) {
requestAnimationFrame(tick);
} else {
animating = animating.filter(function(d) { return d != target });
}
};
tick();
};
})();
var list = document.querySelector(".movie-list");
document.querySelector(".movie-container").addEventListener("click", function(e) {
if (e.target.classList.contains("button")) {
var scroll = list.scrollLeft;
if (e.target.classList.contains("next")) {
scroll += list.offsetWidth;
} else {
scroll -= list.offsetWidth;
}
animate(list, 400, { scrollLeft: scroll });
}
});
})();
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Note that this was not tested in Firefox, because I'm just on the Chromebook this morning.
Scroll down for my (very crude) no-jQuery solution:
...
...
...
...