Menú de la rueda de vainilla JavaScript-jsWheel

Vista prévia

Descripción

jsWheel. js es una biblioteca de JavaScript pura para generar un menú de rueda 3D que se puede navegar entre los elementos con las teclas de flecha.

¿Cómo funciona?

Incluye la biblioteca de JavaScript GSAP de GreenSock y el plugin CSS para animaciones.

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

Cree un contenedor para el menú de la rueda.

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

El código JavaScript para generar un menú de rueda dentro del contenedor que ha creado.

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


}

});

});