Wheel-style Image Rotator with Vanilla JavaScript – jswheel

Preview:

Description:

jswheel is a vanilla JavaScript plugin for making a 3D wheel style rotator / menu that allows you to scroll between images with mouse wheel. Uses Greensock’s TweenLite for animations.

How to use it:

Load the necessary TweenLite JavaScript library in the document.

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

Load the core jswheel.js script in the document.

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

Create a DIV element that will serve as the container for the image rotator.

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

The JavaScript to generate an image rotator inside the div element you created in the previous step.

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 (auto-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]
    // example 2
    // [100, 200, -60, 1, 1],
    // [170, 200, -60, 1, 2],
    // [240, 200, -60, 1, 3],
    // [370, 200, 0, 2, 10],
    // [500, 200, -60, 1, 3],
    // [550, 200, -60, 1, 2],
    // [600, 200, -60, 1, 1]
    // example 3
    // [100, 400, 0, 1, 1],
    // [250, 400, 0, 1, 2],
    // [470, 400, 0, 2, 10],
    // [700, 400, 0, 1, 4],
    // [800, 300, -90, 1, 3],
    // [800, 150, -90, 1, 2],
    // [800, 0, -90, 1, 2],
    // [1800, 3150, 0, 1, 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
     'transitionTime': 170,       // in ms
     'minTransitionTime': 100,    // in ms, when key kept pressed
     'selectPosition': 3,         // active element position for selection
     'startElem': 'marvel'}       // index of item which serves as cursor
  );
  // we override the pixelScaler function (for pixel position)
  // if no override, default function scales items compared to a 1024x768 screen (percentage-like position)
  spinner.pixelScaler = function(value, is_y) {
    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();
    }
  });
});

Changelog:

07/20/2018

• improved pointlist, fixed number decimals