Skip to content

Instantly share code, notes, and snippets.

@thomaswilburn

thomaswilburn/index.html

Created July 10, 2015 15:36
Show Gist options
  • Save thomaswilburn/66d9b4519fd4641106ff to your computer and use it in GitHub Desktop.
Save thomaswilburn/66d9b4519fd4641106ff to your computer and use it in GitHub Desktop.
Download ZIP
Weekly JS Challenge #1
Raw
index.html
<!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">&laquo;</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">&raquo;</a>
</div>
<script>
// YOUR SCRIPT GOES HERE
</script>
</body>
</html>
@thomaswilburn
Copy link
Author

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:

...

...

...

...

var list = document.querySelector(".movie-list");
document.body.addEventListener("click", function(e) {
  if (!e.target.classList.contains("button")) return;
  var scrollOffset = list.scrollLeft;
  var bounds = list.getBoundingClientRect();
  if (e.target.classList.contains("next")) {
    list.scrollLeft += bounds.width;
  } else {
    list.scrollLeft -= bounds.width;
  }
});

@thomaswilburn
Copy link
Author

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