Rueda-estilo de la imagen rotador con vainilla JavaScript-jswheel

Vista prévia

Descripción

jswheel es un plugin de JavaScript vainilla para hacer un rotador/menú de estilo de rueda 3D que le permite desplazarse entre las imágenes con la rueda del ratón. Utiliza el < a href = "http://greensock.com/tweenlite" target = "_ blank" rel = "noopener" > TweenLite para las animaciones de Greensock.

Funcionamiento

Cargue la biblioteca de JavaScript TweenLite necesaria en el documento.

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

Cargue el script principal jswheel. js en el documento.

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

Cree un elemento DIV que servirá como contenedor para el rotador de imágenes.

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

JavaScript para generar un rotador de imágenes dentro del elemento div que creaste en el paso anterior.

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


}

});

});

Registro de cambios

07/20/2018

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