Menú de rueda de estilo de flujo de la cubierta OS X con JavaScript puro-jswheel

Vista prévia

Descripción

jswheel es una librería JavaScript Pure Vanilla para crear un menú de rueda de estilo de flujo de la cubierta de OS X que utiliza < a href = "http://greensock.com/gsap" target = "_ blank" rel = "noopener" > GSAP JS biblioteca para animaciones rápidas y flexibles.

Funcionamiento

Cargue la biblioteca de animaciones GSAP JS necesaria en su proyecto.

<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>

Cargue la biblioteca JS de jswheel en el proyecto.

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

Cree un contenedor para el menú de la rueda.

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

Añadir datos en el menú de la rueda y enlazar eventos de teclado.

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();


}

});

});

Registro de cambios

03/09/2016

• lista de PointList mejorada, decimales de número fijo