Skip to content

Instantly share code, notes, and snippets.

@theskumar

theskumar/index.html

Created August 11, 2013 13:03
Show Gist options
  • Save theskumar/6204798 to your computer and use it in GitHub Desktop.
Save theskumar/6204798 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by Saurabh Kumar. Spinning the Wheel
Raw
index.html
<section class="spin_widget">
<div class="wheel_holder">
<img src="https://dl.dropboxusercontent.com/s/p1grg6kuspaklqe/spinner-wheel_board__highlight.png?token_hash=AAFEC_xUVm6Na2aYdb0jcdC1-1q-0f3svu5uOQPwYIEu1A&dl=1" alt="" class="highlights" />
<img class="wheel" src="https://dl.dropboxusercontent.com/s/6ngd3cir5xsh0ud/spinner-wheel_board__content.png?token_hash=AAH7POtGmIwkgg0DPAXYMuEAgs_6597rp3uX7bNnd3qi-w&dl=1" alt="" />
<div class="needle"></div>
<img src="https://dl.dropboxusercontent.com/s/zacc6u68fa242no/spinner-pin.png?token_hash=AAEuCX0H3IuKOgJPT6blTpfsRgTQhjNOQY8-w5L_xOh9HA&dl=1" alt="" class="pin" />
</div>
<div class="content">
<div class="action_text">
<h1><div>Spin the wheel</div> <div>win <span class="highlight">Rs 1 to 10, 000</span></div> <div>Gauranteed!</div></h1>
<button class="btn spin enabled">Spin the wheel</button>
</div>
<div class="result_text hide">
<h1><div class="highlight">Congrats</div>
<div>you won Rs <span class="highlight win_value"></span></div></h1>
<button class="btn play">Play</button>
<p>
Log in and play daily to spin more and WIN more!
</p>
</div>
</div>
</section>
Raw
script.js
(function() {
$(function() {
var $btn_spin, $wheel_holder, $content;
$btn_spin = $('.spin_widget .btn.spin');
$wheel_holder = $('.spin_widget .wheel_holder'),
$content = $('.spin_widget .content');
var deg_inc = 360/12;
var money_map = {
'500': 0,
'25': deg_inc,
'10000': deg_inc*2,
'50': deg_inc*3,
'1000': deg_inc*4,
'100': deg_inc*5,
'5000': deg_inc*6,
'1': deg_inc*7,
'2000': deg_inc*8,
'5': deg_inc*9,
'200': deg_inc*10,
'10': deg_inc*11,
};
// get this value via ajax, it's hard-coded for shake of demo.
var win_value = get_win_value(money_map); // in Rs.
console.log(win_value);
$($btn_spin).on('click', function(e) {
spin_the_wheel($wheel_holder, -money_map[win_value]);
});
function show_result($el, win_value){
$el.find('.win_value').text(win_value + '!');
$el.find('.action_text').addClass('hide').hide();
$el.find('.result_text').removeClass('show').show();
}
function spin_the_wheel(el, degree){
var wheel = el.find('.wheel'),
needle = el.find('.needle');
wheel.css({'rotate': '0deg'});
var rotation_value = Math.floor((Math.random()*10)+5)*360+degree;
wheel.transition({
rotate: rotation_value+'deg',
duration: 4000,
easing: 'cubic-bezier(0.100, 0.300, 0.700, 1.050)',
complete: function() {
needle.removeClass('vibrate');
}
}).transition({
rotate: rotation_value-randomFromInterval(5,10)+'deg',
duration: 200,
easing: 'cubic-bezier(0.100, 0.300, 0.700, 1.050)',
complete: function() {
show_result($content, win_value)
}
});
needle.addClass('vibrate');
}
});
}).call(this);
// plugins
function randomFromInterval(from,to)
{
return Math.floor(Math.random()*(to-from+1)+from);
}
// fake server response factory for win money,
//
function get_win_value(money_map){
var val = [];
for(var key in money_map){
if(money_map.hasOwnProperty(key)){
val.push(key);
}
}
return val[randomFromInterval(0, val.length)];
}
/*!
* jQuery Transit - CSS3 transitions and transformations
* (c) 2011-2012 Rico Sta. Cruz <[email protected]>
* MIT Licensed.
*
* http://ricostacruz.com/jquery.transit
* http://github.com/rstacruz/jquery.transit
*/
(function(d){function m(a){if(a in j.style)return a;var b=["Moz","Webkit","O","ms"],c=a.charAt(0).toUpperCase()+a.substr(1);if(a in j.style)return a;for(a=0;a<b.length;++a){var d=b[a]+c;if(d in j.style)return d}}function l(a){"string"===typeof a&&this.parse(a);return this}function q(a,b,c,e){var h=[];d.each(a,function(a){a=d.camelCase(a);a=d.transit.propertyMap[a]||d.cssProps[a]||a;a=a.replace(/([A-Z])/g,function(a){return"-"+a.toLowerCase()});-1===d.inArray(a,h)&&h.push(a)});d.cssEase[c]&&(c=d.cssEase[c]);
var f=""+n(b)+" "+c;0<parseInt(e,10)&&(f+=" "+n(e));var g=[];d.each(h,function(a,b){g.push(b+" "+f)});return g.join(", ")}function f(a,b){b||(d.cssNumber[a]=!0);d.transit.propertyMap[a]=e.transform;d.cssHooks[a]={get:function(b){return d(b).css("transit:transform").get(a)},set:function(b,e){var h=d(b).css("transit:transform");h.setFromString(a,e);d(b).css({"transit:transform":h})}}}function g(a,b){return"string"===typeof a&&!a.match(/^[\-0-9\.]+$/)?a:""+a+b}function n(a){d.fx.speeds[a]&&(a=d.fx.speeds[a]);
return g(a,"ms")}d.transit={version:"0.9.9",propertyMap:{marginLeft:"margin",marginRight:"margin",marginBottom:"margin",marginTop:"margin",paddingLeft:"padding",paddingRight:"padding",paddingBottom:"padding",paddingTop:"padding"},enabled:!0,useTransitionEnd:!1};var j=document.createElement("div"),e={},r=-1<navigator.userAgent.toLowerCase().indexOf("chrome");e.transition=m("transition");e.transitionDelay=m("transitionDelay");e.transform=m("transform");e.transformOrigin=m("transformOrigin");j.style[e.transform]=
"";j.style[e.transform]="rotateY(90deg)";e.transform3d=""!==j.style[e.transform];var p=e.transitionEnd={transition:"transitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd",WebkitTransition:"webkitTransitionEnd",msTransition:"MSTransitionEnd"}[e.transition]||null,k;for(k in e)e.hasOwnProperty(k)&&"undefined"===typeof d.support[k]&&(d.support[k]=e[k]);j=null;d.cssEase={_default:"ease","in":"ease-in",out:"ease-out","in-out":"ease-in-out",snap:"cubic-bezier(0,1,.5,1)",easeOutCubic:"cubic-bezier(.215,.61,.355,1)",
easeInOutCubic:"cubic-bezier(.645,.045,.355,1)",easeInCirc:"cubic-bezier(.6,.04,.98,.335)",easeOutCirc:"cubic-bezier(.075,.82,.165,1)",easeInOutCirc:"cubic-bezier(.785,.135,.15,.86)",easeInExpo:"cubic-bezier(.95,.05,.795,.035)",easeOutExpo:"cubic-bezier(.19,1,.22,1)",easeInOutExpo:"cubic-bezier(1,0,0,1)",easeInQuad:"cubic-bezier(.55,.085,.68,.53)",easeOutQuad:"cubic-bezier(.25,.46,.45,.94)",easeInOutQuad:"cubic-bezier(.455,.03,.515,.955)",easeInQuart:"cubic-bezier(.895,.03,.685,.22)",easeOutQuart:"cubic-bezier(.165,.84,.44,1)",
easeInOutQuart:"cubic-bezier(.77,0,.175,1)",easeInQuint:"cubic-bezier(.755,.05,.855,.06)",easeOutQuint:"cubic-bezier(.23,1,.32,1)",easeInOutQuint:"cubic-bezier(.86,0,.07,1)",easeInSine:"cubic-bezier(.47,0,.745,.715)",easeOutSine:"cubic-bezier(.39,.575,.565,1)",easeInOutSine:"cubic-bezier(.445,.05,.55,.95)",easeInBack:"cubic-bezier(.6,-.28,.735,.045)",easeOutBack:"cubic-bezier(.175, .885,.32,1.275)",easeInOutBack:"cubic-bezier(.68,-.55,.265,1.55)"};d.cssHooks["transit:transform"]={get:function(a){return d(a).data("transform")||
new l},set:function(a,b){var c=b;c instanceof l||(c=new l(c));a.style[e.transform]="WebkitTransform"===e.transform&&!r?c.toString(!0):c.toString();d(a).data("transform",c)}};d.cssHooks.transform={set:d.cssHooks["transit:transform"].set};"1.8">d.fn.jquery&&(d.cssHooks.transformOrigin={get:function(a){return a.style[e.transformOrigin]},set:function(a,b){a.style[e.transformOrigin]=b}},d.cssHooks.transition={get:function(a){return a.style[e.transition]},set:function(a,b){a.style[e.transition]=b}});f("scale");
f("translate");f("rotate");f("rotateX");f("rotateY");f("rotate3d");f("perspective");f("skewX");f("skewY");f("x",!0);f("y",!0);l.prototype={setFromString:function(a,b){var c="string"===typeof b?b.split(","):b.constructor===Array?b:[b];c.unshift(a);l.prototype.set.apply(this,c)},set:function(a){var b=Array.prototype.slice.apply(arguments,[1]);this.setter[a]?this.setter[a].apply(this,b):this[a]=b.join(",")},get:function(a){return this.getter[a]?this.getter[a].apply(this):this[a]||0},setter:{rotate:function(a){this.rotate=
g(a,"deg")},rotateX:function(a){this.rotateX=g(a,"deg")},rotateY:function(a){this.rotateY=g(a,"deg")},scale:function(a,b){void 0===b&&(b=a);this.scale=a+","+b},skewX:function(a){this.skewX=g(a,"deg")},skewY:function(a){this.skewY=g(a,"deg")},perspective:function(a){this.perspective=g(a,"px")},x:function(a){this.set("translate",a,null)},y:function(a){this.set("translate",null,a)},translate:function(a,b){void 0===this._translateX&&(this._translateX=0);void 0===this._translateY&&(this._translateY=0);
null!==a&&void 0!==a&&(this._translateX=g(a,"px"));null!==b&&void 0!==b&&(this._translateY=g(b,"px"));this.translate=this._translateX+","+this._translateY}},getter:{x:function(){return this._translateX||0},y:function(){return this._translateY||0},scale:function(){var a=(this.scale||"1,1").split(",");a[0]&&(a[0]=parseFloat(a[0]));a[1]&&(a[1]=parseFloat(a[1]));return a[0]===a[1]?a[0]:a},rotate3d:function(){for(var a=(this.rotate3d||"0,0,0,0deg").split(","),b=0;3>=b;++b)a[b]&&(a[b]=parseFloat(a[b]));
a[3]&&(a[3]=g(a[3],"deg"));return a}},parse:function(a){var b=this;a.replace(/([a-zA-Z0-9]+)\((.*?)\)/g,function(a,d,e){b.setFromString(d,e)})},toString:function(a){var b=[],c;for(c in this)if(this.hasOwnProperty(c)&&(e.transform3d||!("rotateX"===c||"rotateY"===c||"perspective"===c||"transformOrigin"===c)))"_"!==c[0]&&(a&&"scale"===c?b.push(c+"3d("+this[c]+",1)"):a&&"translate"===c?b.push(c+"3d("+this[c]+",0)"):b.push(c+"("+this[c]+")"));return b.join(" ")}};d.fn.transition=d.fn.transit=function(a,
b,c,f){var h=this,g=0,j=!0;"function"===typeof b&&(f=b,b=void 0);"function"===typeof c&&(f=c,c=void 0);"undefined"!==typeof a.easing&&(c=a.easing,delete a.easing);"undefined"!==typeof a.duration&&(b=a.duration,delete a.duration);"undefined"!==typeof a.complete&&(f=a.complete,delete a.complete);"undefined"!==typeof a.queue&&(j=a.queue,delete a.queue);"undefined"!==typeof a.delay&&(g=a.delay,delete a.delay);"undefined"===typeof b&&(b=d.fx.speeds._default);"undefined"===typeof c&&(c=d.cssEase._default);
b=n(b);var l=q(a,b,c,g),k=d.transit.enabled&&e.transition?parseInt(b,10)+parseInt(g,10):0;if(0===k)return b=j,c=function(b){h.css(a);f&&f.apply(h);b&&b()},!0===b?h.queue(c):b?h.queue(b,c):c(),h;var m={};b=j;c=function(b){var c=0;"MozTransition"===e.transition&&25>c&&(c=25);window.setTimeout(function(){var c=!1,g=function(){c&&h.unbind(p,g);0<k&&h.each(function(){this.style[e.transition]=m[this]||null});"function"===typeof f&&f.apply(h);"function"===typeof b&&b()};0<k&&p&&d.transit.useTransitionEnd?
(c=!0,h.bind(p,g)):window.setTimeout(g,k);h.each(function(){0<k&&(this.style[e.transition]=l);d(this).css(a)})},c)};!0===b?h.queue(c):b?h.queue(b,c):c();return this};d.transit.getTransitionValue=q})(jQuery);
Raw
style.scss
@import "compass";
$wheel_height: 400px;
$wheel_width: $wheel_height;
.spin_widget{
position: relative;
color: #fff;
background-color: #020202;
min-height: 500px;
.hide{
display: none;
}
.content{
position: absolute;
left: 50%;
top: 50%;
margin-top: -150px;
margin-left: 100px;
text-align: center;
h1{
text-transform: uppercase;
.highlight{
color: orange;
}
}
}
.wheel_holder{
position: absolute;
left: 50%;
top: 50%;
margin-left: -($wheel_width/2 + 200px);
margin-top: -$wheel_height/2;
transform-origin: $wheel_width/2 $wheel_height/2;
text-align: center;
background: url('https://dl.dropboxusercontent.com/s/du2xrt3903k34b2/spinner-wheel_board__bg.png?token_hash=AAHefLlKqPXsIxfza_HfuvEfRwZnY5EWMYOGA5kt3FZv4Q&dl=1') 0px -2px;
.highlights{
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.wheel{
border-radius: 50%;
}
.pin{
position: absolute;
top: 50%;
left: 50%;
margin-top: -49px;
margin-left: -48px;
background: transparent;
z-index: 5;
}
.board_bg{
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -200px;
z-index: -1;
}
.needle{
$_width: 29px;
$_height: 64px;
height: $_height;
width: $_width;
position: absolute;
z-index: 15;
top: -$_height/2 + 25;
left: 50%;
margin-left: -$_width/2;
text-align: center;
transform-origin: $_width/2 0;
color: orange;
background: url('https://dl.dropboxusercontent.com/s/e3vqwrud9zbi185/spinner-needle.png?token_hash=AAF9of63bm8-N0cFzBBJRSNOwegi-QZyoxyKdFSMGkflzg&dl=1') no-repeat transparent;
transition: transform 0.2s linear;
}
.vibrate{
animation: infinite-spinning 1s infinite;
transform: rotate(-3deg);
transition: transform 0.2s linear;
}
@keyframes needle_vibration{
$base_rotation: -10deg;
0%, 100% {
transform: rotate($base_rotation + 2);
}
30% {
transform: rotate($base_rotation + 1);
}
80%{
transform: rotate($base_rotation - 1);
}
}
}
}
.btn{
border: none;
text-indent: -9999;
font-size: 0;
&.spin{
width: 309px;
height: 87px;
background: url('http://s21.postimg.org/ixb2tiqbr/btn_spin_enabled_bg.png');
}
&.play{
width: 262px;
height: 77px;
background: url('http://s24.postimg.org/8ub7mziqd/btn_spin_play.png');
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment