Author: | vikbez |
---|---|
Views Total: | 666 views |
Official Page: | Go to website |
Last Update: | March 9, 2016 |
License: | MIT |
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(); } }); });