LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
@import url(https://fonts.googleapis.com/css?family=Raleway:300);
html {
  height: 100%;
}

body {
  background: #eee;
  margin: 0;
  height: 100%;
}

form {
  padding: 1em;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}

.knobs {
  list-style: none;
  text-align: center;
}
.knobs li {
  display: inline-block;
  margin: 1em;
}

.a-knob {
  width: 300px;
  height: 300px;
  position: relative;
}
.a-knob .a-knob-handle {
  pointer-events: none;
  width: 270px;
  height: 270px;
  background: #ddd;
  background-image: linear-gradient(#eeeeee, #cccccc);
  border: 0;
  left: 50%;
  top: 50%;
  margin: -135px 0 0 -135px;
  display: block;
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  box-shadow: 0 3px 6px -3px #000, inset 0 -5px 5px -5px #000, inset 0 5px 5px -5px #fff;
}
.a-knob .a-knob-handle::before, .a-knob .a-knob-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
}
.a-knob .a-knob-handle::before {
  width: 176px;
  height: 176px;
  margin-left: -88px;
  margin-top: -88px;
  background: #f2f2f2;
  box-shadow: inset 0 -50px 50px 15px #dadada, 0 -5px 10px -5px #fefefe, 0 1px 3px -1px rgba(0, 0, 0, 0.35);
}
.a-knob .a-knob-handle::after {
  width: 156px;
  height: 156px;
  background: #ddd;
  margin-left: -78px;
  margin-top: -78px;
  box-shadow: inset 0 -10px 15px -5px rgba(0, 0, 0, 0.25), inset 0 10px 25px -10px #fff, 0 25px 50px rgba(0, 0, 0, 0.25), 0 5px 5px -5px rgba(0, 0, 0, 0.35), 0 15px 10px -6px rgba(0, 0, 0, 0.3), 0 25px 15px -7px rgba(0, 0, 0, 0.25), 0 35px 20px -8px rgba(0, 0, 0, 0.2), 0 45px 25px -9px rgba(0, 0, 0, 0.15), 0 55px 30px -10px rgba(0, 0, 0, 0.1);
}
.a-knob .a-knob-input {
  -moz-appearance: none;
  -webkit-appearance: none;
  -moz-transition: color 1s;
  -o-transition: color 1s;
  -webkit-transition: color 1s;
  transition: color 1s;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  z-index: 10;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  padding: 0;
  color: #ccc;
  font-family: 'Raleway', sans-serif;
  font-size: 32px;
  text-align: center;
  text-shadow: 0 1px 1px #fff, 0 -1px 1px #ccc;
  background: none;
  border: 0;
  border-radius: 50%;
  outline: none;
  box-shadow: 0 1px 2px -1px #fff, 0 -1px 2px -1px #ccc, inset 0 -1px 2px -1px #fff, inset 0 1px 2px -1px #ccc;
}
.a-knob .a-knob-input::selection {
  color: #c30;
  background: rgba(255, 255, 255, 0.3);
}
.a-knob .a-knob-input::-moz-selection {
  color: #c30;
  background: rgba(255, 255, 255, 0.3);
}
.a-knob .a-knob-input:focus {
  -moz-transition: color 0.25s ease-out;
  -o-transition: color 0.25s ease-out;
  -webkit-transition: color 0.25s ease-out;
  transition: color 0.25s ease-out;
  color: #999;
}
.a-knob .a-knob-input::-webkit-outer-spin-button, .a-knob .a-knob-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.a-knob .a-knob-label {
  box-shadow: inset 0 5px 3px -1px rgba(0, 0, 0, 0.15);
  display: block;
  width: 294px;
  height: 294px;
  border-radius: 50%;
  position: relative;
  top: 0;
  left: 0;
  z-index: 0;
  background: #fc0;
  background-repeat: no-repeat;
  background-image: linear-gradient(-5deg, #bada55, #ffcc00, #cc3300);
}
.a-knob .a-knob-label.mono {
  background: #ccc;
  background-image: linear-gradient(-5deg, #cccccc, #666666);
}
.a-knob .a-knob-label.blue {
  background: #58b;
  background-image: linear-gradient(-5deg, #99ccff, #668899, #003366);
}
.a-knob .a-knob-label.stripes {
  box-shadow: none;
  background-image: linear-gradient(5deg, rgba(0, 0, 0, 0) 48%, #eeeeee 48%, #eeeeee 52%, rgba(0, 0, 0, 0) 52%), linear-gradient(35deg, rgba(0, 0, 0, 0) 48%, #eeeeee 48%, #eeeeee 52%, rgba(0, 0, 0, 0) 52%), linear-gradient(65deg, rgba(0, 0, 0, 0) 48%, #eeeeee 48%, #eeeeee 52%, rgba(0, 0, 0, 0) 52%), linear-gradient(95deg, rgba(0, 0, 0, 0) 48%, #eeeeee 48%, #eeeeee 52%, rgba(0, 0, 0, 0) 52%), linear-gradient(125deg, rgba(0, 0, 0, 0) 48%, #eeeeee 48%, #eeeeee 52%, rgba(0, 0, 0, 0) 52%), linear-gradient(155deg, rgba(0, 0, 0, 0) 48%, #eeeeee 48%, #eeeeee 52%, rgba(0, 0, 0, 0) 52%), linear-gradient(185deg, #44aacc, #1177aa);
}
.a-knob .a-knob-label.red {
  background: #c30;
  background-image: linear-gradient(-5deg, #993300, #cc3300, #ff3300);
}
.a-knob .a-knob-label::before, .a-knob .a-knob-label::after {
  position: absolute;
  content: '';
  background: #eee;
}
.a-knob .a-knob-label::before {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  top: 10px;
  left: 10px;
}
.a-knob .a-knob-label::after {
  position: absolute;
  left: 50%;
  width: 50%;
  height: 100%;
  border: 0 solid transparent;
  border-right-width: 100px;
  border-bottom-width: 100px;
  border-right-color: #eee;
  margin-left: 5px;
  box-sizing: border-box;
  background-clip: padding-box;
}
.a-knob .a-knob-indicator {
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  height: 140px;
  margin: -70px 0 0 -70px;
  z-index: 1;
  border-radius: 50%;
  border-color: rgba(0, 0, 0, 0.1);
  pointer-events: none;
  -moz-transition: all 0.25s;
  -o-transition: all 0.25s;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}
.a-knob .a-knob-indicator.dragged {
  -moz-transition: all 0s;
  -o-transition: all 0s;
  -webkit-transition: all 0s;
  transition: all 0s;
}
.a-knob .a-knob-indicator::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top: 0;
  border-bottom-color: inherit;
}
JS
/*global document:false */
var aKnob = ( function ( doc, undefined ) {
  'use strict';

  function attr( el, attribute ) {
    return el.getAttribute( attribute );
  }

  function on( el, evs ) {
    Object.keys( evs ).forEach( function ( ev ) {
      ev.split( ' ' ).forEach( function ( splitEv ) {
        el.addEventListener( splitEv, evs[ ev ] );
      });
    });
  }

  function inCircle( p, r ) {
    var x = r - p.x;
    var y = r - p.y;

    return x * x + y * y <= r * r;
  }

  function getEventPoint( ev, el ) {
    var evX = ev.clientX;
    var evY = ev.clientY;

    if ( ev.touches && ev.touches.length ) {
      evX = ev.touches[ 0 ].clientX;
      evY = ev.touches[ 0 ].clientY;
    }

    return {
      x : evX + ( doc.body.scrollLeft || 0 ) - el.offsetLeft,
      y : evY + ( doc.body.scrollTop  || 0 ) - el.offsetTop
    };
  }

  function getDeg( p, r ) {
    var a = r - p.x;
    var b = r - p.y;
    var c = Math.sqrt( a * a + b * b );

    if ( b < 0 ) {
      a = -a;
    }

    var deg = Math.asin( a / c ) * ( 180 / Math.PI );

    if ( b < 0 ) {
      deg += 180;
    }

    return Math.max( 0, Math.min( 225, deg ) );
  }

  function roundValue( min, max, step, prc ) {
    return ~~ ( ( min + ( max - min ) * prc ) / step ) * step;
  }

  function turnTheKnob( el, deg ) {
    if ( ! el ) {
      return false;
    }

    var transform = 'translateZ( 0 ) rotate( ' + -deg + 'deg )';

    [ 'webkitT', 'mozT', 'msT', 'oT', 't' ].forEach( function ( prefix ) {
      el.style[ prefix + 'ransform' ] = transform;
    });
  }

  function isDragged( el, is ) {
    if ( is ) {
      el.classList.add( 'dragged' );
    } else {
      el.classList.remove( 'dragged' );
    }
  }

  function add( el ) {
    var $input     = el.querySelector( '.a-knob-input' );
    var $indicator = el.querySelector( '.a-knob-indicator' );

    var min  = parseInt( attr( $input, 'min' ), 10 )  || 0;
    var max  = parseInt( attr( $input, 'max' ), 10 )  || 100;
    var step = parseInt( attr( $input, 'step' ), 10 ) || 1;

    var r = el.offsetWidth * 0.5;

    var pressed = false;

    function inputChange() {
      // ev.target.value;

      var val = Math.max( min, Math.min( max, $input.value ) );
      var prc = ( val - min ) / ( max - min );

      turnTheKnob( $indicator, 225 - 225 * prc );
    }

    function pointerChange( ev ) {
      var p = getEventPoint( ev, el );

      // input-related
      if ( /input/i.test( ev.target.nodeName )) {

        // console.log( 'focus', ev.type );

        ev.stopPropagation();
        ev.stopImmediatePropagation();

        if ( ev.type === 'click' ) {
          ev.target.focus();
        }

        return ev;
      }

      // outside the circle, - ignore
      if ( ! inCircle( p, r ) ) {
        return ev;
      }

      ev.preventDefault();

      var deg = getDeg( p, r );

      turnTheKnob( $indicator, deg );
      $input.value = roundValue( min, max, step, ( 225 - deg ) / 225 );
    }

    inputChange({
      target : $input
    });

    on( $input, {
      'blur keyup' : inputChange
    });

    on( el, {
      click                  : pointerChange,
      'mousedown touchstart' : function ( ev ) {
        var p = getEventPoint( ev, el );

        // outside the circle, - ignore
        if ( ! inCircle( p, r ) ) {
          return ev;
        }

        ev.preventDefault();
        pressed = true;
        isDragged( $indicator, true );
      },
      'mouseup touchend' : function ( ev ) {
        pressed = false;
        isDragged( $indicator, false );
        pointerChange( ev );
      },
      'mousemove touchmove' : function ( ev ) {
        if ( pressed ) {
          ev.preventDefault();
          pointerChange( ev );
        }
      },
      'mousewheel wheel' : function ( ev ) {
        var val      = parseInt( $input.value, 10 );
        var modifier = ev.wheelDelta > 0 ? 1 : -1;

        $input.value = Math.min( max, Math.max( min, val + modifier * step ) );

        inputChange();
      }
    });
  }

  return function ( selector ) {
    [].forEach.call( doc.querySelectorAll( selector ),  function ( el ) {
      return add( el );
    });
  };

})( document );

aKnob( '.a-knob' );
Host Instantly Drag and Drop Website Builder

 

Description

based on 'a knob' experiment
Term
Mon, 11/27/2017 - 21:47

Related Codes

Pen ID
Pen ID
Pen ID