Une photo panoramique dans le header
Et si on mettait une photo panoramique dans le header ?
Souvent on prend des photos en mode panoramique et elle reste dans notre carte SD ou on la redimensionne pour pouvoir l’insérer correctement sur notre site. Mais on peut aussi l’afficher dans notre header par exemple, avec un mouvement de la souris à gauche ou à droite pour la faire défiler et créer un effet sympa.
-
1234<div class="cycle"><h2 class="text-center"><small>Maintenez</small></h2> </div>
-
1234567891011/* Ajouter l'url de votre photo */.cycle {background-image: url(http://comconflans.com/wp-content/uploads/2014/11/restaurant-cover.png);height: 415px;cursor: move;}.box {width: 512px;margin: 0 auto;font-family: arial, sans-serif;}
-
1234567891011<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>// A insérer dans le footer dans une balise<script>$(document).ready(function($) {$('.cycle').cyclotron();// Ajouter l'url de votre photo.$(".cycle").css('cursor', 'url(http://comconflans.com/wp-content/uploads/2014/11/restaurant-cover.png),auto');});<script src="js/panoramic.js"></script>// Créer un fichier panoramic.js et faire un appel ( voir au dessus ).(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));
Il ne reste plus qu’à insérer ce code source dans votre site et le tour est joué. On peut tout à fait l’insérer dans le fichier header.php de notre WordPress et ajouter un champ personnalisé afin d’avoir une photo panoramique pour chaque page.
Source de l’article : http://kaioa.com/k/test/cyclotron/index.html
Github : https://github.com/mahonnaise/cyclotron
