Animated - Knobs & Gauges

based on http://jsfiddle.net/cvQED/84/

by bizamajig

HTML

<script src="http://anthonyterrien.com/js/jquery.knob.js"></script>
<script src="http://matthewlein.com/js/jquery.easing.1.3.js"></script>
<div class="scroll" style="position:fixed; top:0; width: 100%; border-bottom:solid 1px #000;">Scroll</div>
    <br>\/
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
    <br><span class="thing">...</span>
<br>3<br>
<br>
<br>2<br>
<br>
<br>1<br>
<br>
<br>0<br>
<br>
<br>
    <input class="knob h" data-targetValue="0">
<input class="knob hh" data-targetValue="0">
<input class="knob hhh" data-targetValue="0">
    <br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br>

CSS

.knob {
    display: none;
    color: green;
}

JavaScript

$('.h').data('targetValue', 55);
$('.hh').data('targetValue', 24);
$('.hhh').data('targetValue', 90);

//basic setup
$('.knob').knob({
    value: 0,
        'readOnly': true,
        'width': 125,
        //'height': 120,
        'dynamicDraw': true,
        'thickness': 0.1,
        'tickColorizeValues': true,
    'fgColor':'red',
    //'bgColor':'#FFF',
        'skin': 'tron',
    'data-bgcolor':'#ffec03',
    
    'data-width':110,
    'data-fgColor':'#fff',
    'data-displayPrevious': true
});

$.when(
$(window).scroll(function(){
          var top = $(document).scrollTop();
          if (top > 730) {
              if($('.knob').val() == 0)
              {

        $('.knob').animate({
    value: 100
}, {
    duration: 1500,
    easing: 'swing',
    progress: function () {
    $(this).val(Math.round(this.value/100*$(this).data('targetValue'))).trigger('change').fadeIn()
    } } )  }
}
    
}

)

)
  //  });
//});
$.getScript('http://imakewebthings.com/jquery-waypoints/waypoints.min.js', function() {
    

    $('.thing').waypoint(function() {
    
        alert('Top of thing hit top of viewport.');
        //$(this).css({
          //  borderColor: 'blue'
       // });
        
    });
    
    $(window).scroll(function () { 
        //You've scrolled this much:
           $('.scroll').text("You've scrolled " + $ (window).scrollTop() + " pixels");
    });
    
    
});