Vanilla JavaScript Wheel Menu – jsWheel

Preview:

Description:

jsWheel.js is a pure JavaScript library for generating a 3D wheel menu that you can navigate between items with arrow keys.

Basic usage:

Include the necessary GreenSock’s GSAP JavaScript library and CSS plugin for animations.

<script src="TweenLite.min.js"></script>
<script src="CSSPlugin.min.js"></script>

Create a container for the wheel menu.

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

The JavaScript to generate a wheel menu inside the container you created.

document.addEventListener('DOMContentLoaded', function() {
  // image example
  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"}]};
  // html example
  // var wheel_data = {"elems":
  // [{"name": "Avatar", "html": "<b>%name%</b>"},
  //  {"name": "DC Comics", "html": "<b>%name%</b>"},
  //  {"name": "Icon", "html": "<b>%name%</b>"},
  //  {"name": "Marvel", "html": "<b>%name%</b>"},
  //  {"name": "Oni", "html": "<b>%name%</b>"},
  //  {"name": "Valiant", "html": "<b>%name%</b>"},
  //  {"name": "Vertigo", "html": "<b>%name%</b>"}]};
  var stopPoints = [
    // list of points used for stops
    // X, Y, scale, z-index, transform CSS
    // (position auto-scaled on a basis of 1024/768)
    // example NEW
    {x:120, y:100, scale:1, zIndex:3, z:150, rotationY:40},
    {x:300, y:100, scale:1, zIndex:2, z:50, rotationY:20},
    {x:500, y:100, scale:1, zIndex:1, z:10, rotationY:0},
    {x:700, y:100, scale:1, zIndex:2, z:50, rotationY:-20},
    {x:880, y:100, scale:1, zIndex:3, z:150, rotationY:-40},
  ];
  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
     'transitionTime': 270,       // in ms
     'minTransitionTime': 100,    // in ms, when key kept pressed
     'selectPosition': 2,         // active element position for selection
     'hide': false,               // If this is true, hide wheel after a certain amount of time
     'hideStart': 5000,           // in ms, time after which starts hiding wheel
     'hideDuration': 1000,        // in ms, time for wheel to be completely hidden
     'containerStyle': {          // custom css for the container
       perspective: '1000px',
     },
     'startElem': 'marvel'}       // index of item which serves as cursor
  );
  // we override the scaler function (for element position)
  // if no override, default function uses percentages for positions
  // 'type' parameter is an string telling what we are getting (can be 'x', 'y', 'scale')
  spinner.scaler = function(value, type) {
    return (value);
  };
  // re-render
  spinner.update();
  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 moves to next letter
    } else if (e.keyCode == 32) {
      spinner.moveToLetter('next');
      e.preventDefault();
    // enter selects an item
    } else if (e.keyCode == 13) {
      alert(spinner.select().name);
      e.preventDefault();
    }
  });
});