OS X Cover Flow-style Wheel Menu with Pure JavaScript – jswheel

Preview:

Description:

jswheel is a pure vanilla JavaScript library to create an OS X cover flow style wheel menu that uses GSAP JS library for fast, flexible animations.

How to use it:

Load the required GSAP JS animation library in your project.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>

Load the jswheel JS library in the project.

<script src="jswheel.js"></script>

Create a container for the wheel menu.

<div id="container"></div>

Add data into the wheel menu and bind keyboard events.

document.addEventListener('DOMContentLoaded', function() {
  var wheel_data = {"elems":
  [{"name": "Avatar", "file": "icons/Avatar.png"},
   {"name": "DC Comics", "file": "icons/DC Comics.png"},
   {"name": "Icon", "file": "icons/Icon.png"},
   {"name": "Marvel", "file": "icons/Marvel.png"},
   {"name": "Oni", "file": "icons/Oni.png"},
   {"name": "Valiant", "file": "icons/Valiant.png"},
   {"name": "Vertigo", "file": "icons/Vertigo.png"}]};
  var stopPoints = [
    //list of points used for stops
    // X, Y, Angle, Scale, z-index (scaled on a basis of 1024/768)
    // example 1
    [100, 100, 50, 0.7, 1],
    [150, 100, 20, 1, 2],
    [200, 100, 10, 1.2, 3],
    [350, 100, 0, 1.9, 10],
    [500, 100, -10, 1.2, 3],
    [550, 100, -20, 1, 2],
    [600, 100, -50, 0.7, 1]
  ];
  spinner = new jswheel(
    wheel_data.elems, // wheel item list {elems: [{name: name, file: image.png}, ...]}
    stopPoints, // points used for element positions
    {'containerId': 'container', // wheel container ID
     'css': '', // unused
     'transitionTime': 170, // in ms
     'minTransitionTime': 100, // in ms, when key kept pressed
     'selectPosition': 3,
     'startElem': 'marvel'} // index of item which serves as cursor
  );
  window.addEventListener('keydown', function (e) {
    // right
    if (e.keyCode == 39) {
      spinner.move('next');
      e.preventDefault();
    // left
    } else if (e.keyCode == 37) {
      spinner.move('prev');
      e.preventDefault();
    // space
    } else if (e.keyCode == 32) {
      spinner.moveToLetter('next');
      e.preventDefault();
    // enter
    } else if (e.keyCode == 13) {
      alert(spinner.select().name);
      e.preventDefault();
    }
  });
});

Changelog:

03/09/2016

• improved pointlist, fixed number decimals