LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
hover

speedometer experiment

Have fun with this little speedometer experiment.
The javascript is only needed to update the text!

CSS
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700);

body {
  background: #fff;
}

#el:before {
  background: #fbfbfb;
  border-radius: 200px 200px 0 0;
  box-shadow: 3px 1px 8px rgba(0, 0, 0, 0.15) inset;
  content: "";
  height: 100px;
  position: absolute;
  width: 200px;
}

#el {
  border-radius: 200px 200px 0 0;
  height: 100px;
  margin: 50px auto 0;
  overflow: hidden;
  position: relative;
  width: 200px;
}

#el:after {
  background: #fff;
  border-radius: 140px 140px 0 0;
  bottom: 0;
  box-shadow: 3px 1px 8px rgba(0, 0, 0, 0.15);
  color: rgba(255, 80, 0, 0.7);
  content: attr(data-value);
  font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 3.5em;
  font-weight: 100;
  height: 70px;
  left: 30px;
  line-height: 95px;
  position: absolute;
  text-align: center;
  width: 140px;
  z-index: 3;
}

span {
  background: rgba(255, 80, 0, 0.7);
  border-radius: 4px;
  bottom: -4px;
  box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.4);
  display: block;
  height: 8px;
  left: 10px;
  position: absolute;
  width: 90px;
  -webkit-transform-origin: 100% 4px;
          transform-origin: 100% 4px;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: all 1s;
  transition: all 1s;
}

#el:hover span {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

h1,
p,
strong {
  display: block;
  font-family: Lato;
  text-align: center;
}

h1 {
  margin-bottom: 0.4em;
}

p {
  margin-top: 0;
}

strong {
  color: #efefef;
  font-size: 2.5em;
}
JS
var needle = $('needle');
var el = $('el');

var measureDeg = function() {
  // matrix-to-degree conversion from https://css-tricks.com/get-value-of-css-rotation-through-javascript/
  var st = window.getComputedStyle(needle, null);
  var tr = st.getPropertyValue("-webkit-transform") ||
           st.getPropertyValue("-moz-transform") ||
           st.getPropertyValue("-ms-transform") ||
           st.getPropertyValue("-o-transform") ||
           st.getPropertyValue("transform") ||
           "fail...";

  var values = tr.split('(')[1];
      values = values.split(')')[0];
      values = values.split(',');
  var a = values[0];
  var b = values[1];
  var c = values[2];
  var d = values[3];

  var scale = Math.sqrt(a*a + b*b);

  // arc sin, convert from radians to degrees, round
  var sin = b/scale;
  var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
  
  el.set('data-value', angle);
};

var periodicalID = measureDeg.periodical(10);
Host Instantly Drag and Drop Website Builder

 

Description

Speedometer animation, basically without javascript. The included javascript only updates the number. The animation itself is handled via CSS3 transitions.
Term
Mon, 11/27/2017 - 22:13

Related Codes

Pen ID
Pen ID
Pen ID