Bootstrap Easy panoramic headers



<!-- Placed outside of .container, will make it screen width, you can place inside .row -->
<div class="cycle">
<h2 class="text-center">Easy panoramic headers: <small>drag mouse around on image</small></h2>
</div>

<div class="container">
  <div class="row">

    <br><br><br><hr>
    <p>Cyclotron project:<a href="https://github.com/mahonnaise/cyclotron" target="_blank">https://github.com/mahonnaise/cyclotron</a></p>
    <p><small>Image by <a href="http://www.flickr.com/photos/smyph/" target="_blank">smyph.</a></small></p>
    <p><small>Cursor by <a href="https://www.iconfinder.com/icons/80532/finger_flick_gestureworks_one_icon" target="_blank">Gestureworks_one.</a></small></p>
    <hr>

    </div>
</div>


    .cycle {
  background-image: url(http://i.imgur.com/cxAGkCf.jpg);
  height: 415px;
  cursor: move;
}
.box {
  width: 512px;
  margin: 0 auto;
  font-family: arial, sans-serif;
}

    

	/*
Ref:
https://github.com/mahonnaise/cyclotron
*/

$(document).ready(function($) {
    $('.cycle').cyclotron();

    $(".cycle").css('cursor', 'url(http://i.imgur.com/FrQFOJo.png),auto');
});


// library

(function($) {
    $.fn.cyclotron = function(options) {
        var settings = $.extend({
            dampingFactor: 0.93,
            historySize: 5
        }, options);
        return this.each(function() {
            var container, sx, dx = 0,
                armed, offset = 0,
                tick, prev, h = [];
            container = $(this);

            container.mousedown(function(e) {
                sx = e.pageX - offset;
                armed = true;
                e.preventDefault();
            });
            container.mousemove(function(e) {
                var px;
                if (armed) {
                    px = e.pageX;
                    if (prev === undefined) {
                        prev = px;
                    }
                    offset = px - sx;
                    if (h.length > settings.historySize) {
                        h.shift();
                    }
                    h.push(prev - px);

                    container.css('background-position', offset);

                    prev = px;
                }
            });
            container.bind('mouseleave mouseup', function() {
                if (armed) {
                    var i, len = h.length,
                        v = h[len - 1];
                    for (i = 0; i < len; i++) {
                        v = (v * len + (h[i])) / (len + 1);
                    }
                    dx = v;
                }
                armed = false;
            });
            tick = function() {
                if (!armed && dx) {
                    dx *= settings.dampingFactor;
                    offset -= dx;
                    container.css('background-position', offset);
                    if (Math.abs(dx) < 0.001) {
                        dx = 0;
                    }
                }
            };
            setInterval(tick, 16);
        });
    };
}(jQuery));