JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://gasvehicular.net/fuelgas/ruleta//ruleta_files/jquery.transit.min.js"></script>
<div class="wheel-wrap">
<img class="wheel" src="http://babygifts4u.co.uk/rol/wheelhalf.png" />
<img class="marker" src="http://jquery4u.com/images/marker.png" />
</div>
CSS
#apDiv1 {
position: absolute;
width: 200px;
height: 115px;
z-index: 1;
}
.wheel-wrap {
position: relative;
width: 550px;
height: 550px;
overflow: hidden;
margin: 0 auto;
z-index: 1;
background-image:url(http://babygifts4u.co.uk/rol/wheel.png);
background-repeat:no-repeat;
background-size:550px;
}
.marker {
top: 10px;
left: 250px;
z-index: 2;
position: absolute;
}
.wheel {
margin-top: 65px;
margin-left: 65px;
width: 420px;
z-index: 1;
}
JavaScript
$(function(){
window.WHEELOFFORTUNE = {
cache: {},
init: function () {
console.log('controller init...');
var _this = this;
this.cache.wheel = $('.wheel');
this.cache.wheelMarker = $('.marker');
this.cache.wheelSpinBtn = $('.wheel');
//mapping is backwards as wheel spins clockwise //1=win
this.cache.wheelMapping = [1,20,14,31,9,22,18,29,7,28,12,35,3,26,0, 32,15,19,4,21,2,25,17,34,6,27,13,36,11,30,8,23,10,5,24,16,33].reverse();
this.cache.wheelSpinBtn.on('click', function (e) {
e.preventDefault();
if (!$(this).hasClass('disabled')) _this.spin();
});
//reset wheel
this.resetSpin();
//setup prize events
this.prizeEvents();
},
spin: function () {
console.log('spinning wheel');
var _this = this;
// reset wheel
this.resetSpin();
//disable spin button while in progress
this.cache.wheelSpinBtn.addClass('disabled');
/*
Wheel has 10 sections.
Each section is 360/10 = 36deg.
*/
var deg = 1500 + Math.round(Math.random() * 1500),
duration = 200; //optimal 6 secs
_this.cache.wheelPos = deg;
//transition queuing
//ff bug with easeOutBack
this.cache.wheel.transition({
rotate: '0deg'
}, 0)
.transition({
rotate: deg + 'deg'
}, duration, 'easeOutCubic');
//move marker
_this.cache.wheelMarker.transition({
rotate: '-40deg'
}, 0,...