"Easy panoramic headers "
Bootstrap 3.1.0 Snippet by mrmccormack

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!--Submitted March 23, 12:00 noon --> <!-- 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> <!-- /.cycle --> <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> <p> <br> <a href="http://validator.w3.org/check?uri=http%3a%2f%2fbootsnipp.com%2fiframe%2f6pxr;ss=1"><span class="glyphicon glyphicon-check" style="color: #339900;"></span><small> HTML</small><sup>5</sup></a> </p> </div><!-- /.row --> </div><!-- /.container -->
.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));

Related: See More


Questions / Comments:

Hey i would love to make this move as per the mouse position. Can anybody help me?

Ratnesh Karbhari () - 7 years ago - Reply 0


Cool!

Николай () - 9 years ago - Reply 0


Auto Play?

Umar Mughal () - 9 years ago - Reply 0


thanks its almost exactly what I'm looking for but is there a way to make it play automatically through? document ready function?

Pharmokan () - 9 years ago - Reply 0


Anyone who would like to have mobile support for this use this version of cyclotron https://github.com/quelbs/c...

soulgriever () - 9 years ago - Reply 0


Is there anyway to make this work on a phone? does not seem to work on my galaxy s4

soulgriever () - 9 years ago - Reply 0


this is dope......nice work

Oyeleye mustapha () - 9 years ago - Reply 0


Nice..

Crazyemzy () - 9 years ago - Reply 0


Just what I was looking for !

Webrunner () - 9 years ago - Reply 0


pretty good!!!

Nan () - 9 years ago - Reply 0