LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
Spinning The Circle Is Super Exciting

Scroll On The Wheel

CSS
body {
  background-color: #555;
  font-family: Tahoma, Verdana, Segoe, sans-serif;
}
#text {
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 270px;
  height: 600px;
  background-color: #555;
  -webkit-box-shadow: 8px 0px 6px -6px black;
  -moz-box-shadow: 8px 0px 6px -6px black;
  box-shadow: 8px 0px 6px -6px black;
}
p {
  position: relative;
  top: 250px;
}
#wheelExt {
  -webkit-box-shadow: 8px 6px 15px -6px #222;
  -moz-box-shadow: 8px 6px 15px -6px #222;
  box-shadow: 8px 6px 15px -6px #222;
  position: absolute;
  top: 50px;
  height: 500px;
  width: 500px;
  border: 3px solid #333;
  border-radius: 50%;
}
#wheel {
  position: absolute;
  height: 500px;
  width: 500px;
  border-radius: 50%;
  background-color: #ccc;
  overflow: hidden;
}
#wheel div {
  position: absolute;
  left: 100px;
  bottom: -10px;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  border-style: solid;
  border-width: 260px 150px;
  box-sizing: border-box;
}
#wheel div.color01 {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  border-color: #662a6c transparent transparent transparent;
}
#wheel div.color02 {
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  transform: rotate(60deg);
  border-color: #2381ad transparent transparent transparent;
}
#wheel div.color03 {
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  -o-transform: rotate(120deg);
  transform: rotate(120deg);
  border-color: #639b47 transparent transparent transparent;
}
#wheel div.color04 {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  border-color: #e1e23b transparent transparent transparent;
}
#wheel div.color05 {
  -webkit-transform: rotate(240deg);
  -moz-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  -o-transform: rotate(240deg);
  transform: rotate(240deg);
  border-color: #f7941e transparent transparent transparent;
}
#wheel div.color06 {
  -webkit-transform: rotate(300deg);
  -moz-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  -o-transform: rotate(300deg);
  transform: rotate(300deg);
  border-color: #9a1d34 transparent transparent transparent;
}
#wheel span {
  cursor: pointer;
  position: absolute;
  left: 370px;
  bottom: 225px;
  -webkit-transform-origin: -300% 0%;
  -moz-transform-origin: -300% 0%;
  -ms-transform-origin: -300% 0%;
  -o-transform-origin: -300% 0%;
  transform-origin: -300% 0%;
}
#wheel span.word {
  font-size: 20px;
  width: 40px;
  float: right;
}
#wheel span.word01 {
  -webkit-transform: rotate(23deg);
  -moz-transform: rotate(23deg);
  -ms-transform: rotate(23deg);
  -o-transform: rotate(23deg);
  transform: rotate(23deg);
}
#wheel span.word02 {
  -webkit-transform: rotate(83deg);
  -moz-transform: rotate(83deg);
  -ms-transform: rotate(83deg);
  -o-transform: rotate(83deg);
  transform: rotate(83deg);
}
#wheel span.word03 {
  -webkit-transform: rotate(143deg);
  -moz-transform: rotate(143deg);
  -ms-transform: rotate(143deg);
  -o-transform: rotate(143deg);
  transform: rotate(143deg);
}
#wheel span.word04 {
  -webkit-transform: rotate(203deg);
  -moz-transform: rotate(203deg);
  -ms-transform: rotate(203deg);
  -o-transform: rotate(203deg);
  transform: rotate(203deg);
}
#wheel span.word05 {
  -webkit-transform: rotate(263deg);
  -moz-transform: rotate(263deg);
  -ms-transform: rotate(263deg);
  -o-transform: rotate(263deg);
  transform: rotate(263deg);
}
#wheel span.word06 {
  -webkit-transform: rotate(323deg);
  -moz-transform: rotate(323deg);
  -ms-transform: rotate(323deg);
  -o-transform: rotate(323deg);
  transform: rotate(323deg);
}
#wheel:before {
  position: absolute;
  height: 450px;
  width: 450px;
  left: 25px;
  top: 25px;
  background-color: #222;
  border-radius: 50%;
  -webkit-transform-origin: 50px 150px;
  -moz-transform-origin: 50px 150px;
  -ms-transform-origin: 50px 150px;
  -o-transform-origin: 50px 150px;
  transform-origin: 50px 150px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
#wheel:before:hover {
  -webkit-transform: rotate(540deg);
  -moz-transform: rotate(540deg);
  -ms-transform: rotate(540deg);
  -o-transform: rotate(540deg);
  transform: rotate(540deg);
}
JS
function getRotationDegrees(obj) {
    var matrix = obj.css("-webkit-transform") ||
    obj.css("-moz-transform")    ||
    obj.css("-ms-transform")     ||
    obj.css("-o-transform")      ||
    obj.css("transform");
    if(matrix !== 'none'
      && matrix !== undefined
      ) {
        var values = matrix.split('(')[1].split(')')[0].split(',');
        var a = values[0];
        var b = values[1];
        var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
    } else { var angle = 0; }
    return (angle < 0) ? angle +=360 : angle;
}

function rotate(degree){
  //degree = degree * -1;
  if (degree > 20)
    degree = 20;
  else if (degree < -20)
    degree = -20;
  console.log(degree);
  
  var newDeg = (getRotationDegrees($('#wheel')) + degree);
  
  $('#wheel').css({'-webkit-transform': 'rotate(' + newDeg + 'deg)'});
      // For Mozilla browser: e.g. Firefox
  $('#wheel').css({ '-moz-transform': 'rotate(' + newDeg + 'deg)'});
  
  $('#wheel').css({ '-o-transform': 'rotate(' + newDeg + 'deg)'});
  $('#wheel').css({ 'transform': 'rotate(' + newDeg + 'deg)'});
}

$('body').on('mousewheel', function(e){
  var delta;
	
  //console.log($(e.target).hasClass("wheel_part"));
  if ($(e.target).hasClass("wheel_part")){
		e.preventDefault();
  
    if (e.type == 'mousewheel') {
     delta = e.originalEvent.wheelDelta


    }
    else if (e.type == 'DOMMouseScroll') {
      delta = e.originalEvent.detail;
    }
    rotate(delta / 10); 
  }
});
Host Instantly Drag and Drop Website Builder

 

Description

May not be the most usable thing in terms of UI, but it certainly was fun to make!
Term
Mon, 11/27/2017 - 22:02

Related Codes

Pen ID
Pen ID
Pen ID