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