Je vous présente aujourd’hui un tutoriel sur comment créer un effet de parallaxe sur son site grâce au plugin jParallax.
Premièrement il faut utiliser un id=”parallax” sur la balise sur laquelle on souhaite avoir du parallaxe afin de pouvoir lancer le script jquery.jparallax.js qui fera le reste.
Le principe est assez simple une fois que l’on a compris son fonctionnement. Par exemple j’utilise une balise qui contient tout mon parallaxe, je lui donne une largeur de 1000px et une hauteur de 500px.
Si à l’intérieur de celle-ci, je mets une image ou une balise de 1000px et 500px de large, il ne restera aucun espace afin que cette dernière bouge :
Si je mets une balise de 900px de large et 500px de haut, cette dernière ne pourra bouger que latéralement de 100px :
Si je mets une balise de 1000px de large et 400px de haut, cette dernière ne bougera que verticalement de 100px :
Si je mets une balise de 900px de large et 400px de haut, cette dernière bougera sur l’axe des x comme sur l’axe des y :
Plus les balises présentes dans la balise générale du parallaxe sont petites, plus elles seront mobiles.
Vous trouverez ci-dessous les fichiers sources ainsi qu’une démo :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Parallaxe - webdesignweb - stratis bakas</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<!-- Inclusion google webfont -->
<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis+Light&v2' rel='stylesheet' type='text/css'>
<!-- Inclusion de jQuery et du script de parallax -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jparallax.js"></script>
<!-- script qui permet de lancer la fonction jparallax lorsqu'on est dans la balise avec l'id parallax -->
<script type="text/javascript">
$(document).ready(function () {
$('#parallax').jparallax();
});
</script>
</head>
<body>
<div class="conteneur">
<!-- Je mets un id="parallax" pour lancer le script js qui va faire le reste -->
<div id="parallax">
<!-- Ici j'utilise une balise p dans laquelle je mets l'image afin de pouvoir régler la taille sans déformer l'image ou sans meme devoir passer par photoshop pour régler la taille de l'image. le dernier -->
<p style="text-align:center; width:970px;height:470px;padding-top:350px;"><img src="img/bandes.png"/></p>
<p style="text-align:center; width:975px;height:460px;padding-top:350px;"><img src="img/bandes.png"/></p>
<p style="text-align:center; width:980px;height:450px;padding-top:350px;"><img src="img/bandes.png"/></p>
<p style="text-align:center; width:940px;height:490px;padding-top:0px;"><img src="img/rond-rose.png"/></p>
<p style="text-align:center; width:780px;height:465px;padding-top:0px;"><img src="img/trait1.png"/></p>
<p style="text-align:center; width:680px;height:445px;padding-left:100px;"><img src="img/trait2.png"/></p>
<p style="text-align:center; width:580px;height:465px;padding-top:0px;"><img src="img/trait3.png"/></p>
<p style="text-align:left; width:800px;height:365px;padding-left:100px;"><img src="img/branches2.png"/></p>
<p style="text-align:right; width:800px;height:395px;padding-top:0px;"><img src="img/branches1.png"/></p>
<p style="text-align:center; width:970px;height:470px;padding-top:90px;"><img src="img/logo-sb.png"/></p>
<p style="width:980px; height:480px; color:#ed6578; text-align:center;padding-top:290px;"><a href="http://www.stratisbakas.com" target="_blank">www.stratisbakas.com</a><br /><a href="https://www.webdesignweb.fr" target="_blank">www.webdesignweb.fr</a><br /><a href="http://dribbble.com/stratweb" target="_blank">dribbble.com/stratweb</a></p>
</div><!-- #parallax -->
</div><!-- .conteneur -->
<div id="footer">
<div class="conteneur">
<p style="text-align:center; margin:0;padding-top:80px;color:#ed6578;">Merci d'avoir suivi ce tuto et n'hésitez pas à partager.</p>
<p style="text-align:center; margin:0;padding-top:40px;color:#ed6578;">Stratis bakas</p>
</div><!-- .conteneur -->
</div><!-- #footer -->
</body>
</html>
Le code css :
@charset "UTF-8";
/* CSS Document */
body {
background: #eaecec url(../img/bg12.png) repeat;
margin: 0;
padding: 0;
font-family: 'Terminal Dosis Light', sans-serif;
text-transform: uppercase;
}
#parallax {
position: relative;
overflow: hidden;
width: 1000px;
height: 500px;
margin-top: 0px;
}
.conteneur {
width: 1000px;
margin: 0 auto;
}
a {
color: #ed6578;
text-decoration: none;
}
#footer {
width: 100%;
background: #2b2b2b;
height: 280px;
}
Le fichier jquery.jparallax.js :
// jquery.jparallax.js
// 0.9.1
// Stephen Band
//
// Dependencies:
// jQuery 1.2.6 (jquery.com)
//
// Project and documentation site:
// http://webdev.stephband.info/parallax.html
// CLOSURE
(function(jQuery) {
// PRIVATE FUNCTIONS
function stripFiletype(ref) {
var x=ref.replace('.html', '');
return x.replace('#', '');
}
function initOrigin(l) {
if (l.xorigin=='left') {l.xorigin=0;} else if (l.xorigin=='middle' || l.xorigin=='centre' || l.xorigin=='center') {l.xorigin=0.5;} else if (l.xorigin=='right') {l.xorigin=1;}
if (l.yorigin=='top') {l.yorigin=0;} else if (l.yorigin=='middle' || l.yorigin=='centre' || l.yorigin=='center') {l.yorigin=0.5;} else if (l.yorigin=='bottom') {l.yorigin=1;}
}
function positionMouse(mouseport, localmouse, virtualmouse) {
var difference = {x: 0, y: 0, sum: 0};
// Set where the virtual mouse is, if not on target
if (!mouseport.ontarget) {
// Calculate difference
difference.x = virtualmouse.x - localmouse.x;
difference.y = virtualmouse.y - localmouse.y;
difference.sum = Math.sqrt(difference.x*difference.x + difference.y*difference.y);
// Reset virtualmouse
virtualmouse.x = localmouse.x + difference.x * mouseport.takeoverFactor;
virtualmouse.y = localmouse.y + difference.y * mouseport.takeoverFactor;
// If mouse is inside the takeoverThresh set ontarget to true
if (difference.sum < mouseport.takeoverThresh && difference.sum > mouseport.takeoverThresh*-1) {
mouseport.ontarget=true;
}
}
// Set where the layer is if on target
else {
virtualmouse.x = localmouse.x;
virtualmouse.y = localmouse.y;
}
}
function setupPorts(viewport, mouseport) {
var offset = mouseport.element.offset();
jQuery.extend(viewport, {
width: viewport.element.width(),
height: viewport.element.height()
});
jQuery.extend(mouseport, {
width: mouseport.element.width(),
height: mouseport.element.height(),
top: offset.top,
left: offset.left
});
}
function parseTravel(travel, origin, dimension) {
var offset;
var cssPos;
if (typeof(travel) === 'string') {
if (travel.search(/^\d+\s?px$/) != -1) {
travel = travel.replace('px', '');
travel = parseInt(travel, 10);
// Set offset constant used in moveLayers()
offset = origin * (dimension-travel);
// Set origin now because it won't get altered in moveLayers()
cssPos = origin * 100 + '%';
return {travel: travel, travelpx: true, offset: offset, cssPos: cssPos};
}
else if (travel.search(/^\d+\s?%$/) != -1) {
travel.replace('%', '');
travel = parseInt(travel, 10) / 100;
}
else {
travel=1;
}
}
// Set offset constant used in moveLayers()
offset = origin * (1 - travel);
return {travel: travel, travelpx: false, offset: offset}
}
function setupLayer(layer, i, mouseport) {
var xStuff;
var yStuff;
var cssObject = {};
layer[i]=jQuery.extend({}, {
width: layer[i].element.width(),
height: layer[i].element.height()
}, layer[i]);
xStuff = parseTravel(layer[i].xtravel, layer[i].xorigin, layer[i].width);
yStuff = parseTravel(layer[i].ytravel, layer[i].yorigin, layer[i].height);
jQuery.extend(layer[i], {
// Used in triggerResponse
diffxrat: mouseport.width / (layer[i].width - mouseport.width),
diffyrat: mouseport.height / (layer[i].height - mouseport.height),
// Used in moveLayers
xtravel: xStuff.travel,
ytravel: yStuff.travel,
xtravelpx: xStuff.travelpx,
ytravelpx: yStuff.travelpx,
xoffset: xStuff.offset,
yoffset: yStuff.offset
});
// Set origin now if it won't be altered in moveLayers()
if (xStuff.travelpx) {cssObject.left = xStuff.cssPos;}
if (yStuff.travelpx) {cssObject.top = yStuff.cssPos;}
if (xStuff.travelpx || yStuff.travelpx) {layer[i].element.css(cssObject);}
}
function setupLayerContents(layer, i, viewportOffset) {
var contentOffset;
// Give layer a content object
jQuery.extend(layer[i], {content: []});
// Layer content: get positions, dimensions and calculate element offsets for centering children of layers
for (var n=0; n<layer[i].element.children().length; n++) {
if (!layer[i].content[n]) layer[i].content[n] = {};
if (!layer[i].content[n].element) layer[i].content[n]['element'] = layer[i].element.children().eq(n);
// Store the anchor name if one has not already been specified. You can specify anchors in Layer Options rather than html if you want.
if(!layer[i].content[n].anchor && layer[i].content[n].element.children('a').attr('name')) {
layer[i].content[n]['anchor'] = layer[i].content[n].element.children('a').attr('name');
}
// Only bother to store child's dimensions if child has an anchor. What's the point otherwise?
if(layer[i].content[n].anchor) {
contentOffset = layer[i].content[n].element.offset();
jQuery.extend(layer[i].content[n], {
width: layer[i].content[n].element.width(),
height: layer[i].content[n].element.height(),
x: contentOffset.left - viewportOffset.left,
y: contentOffset.top - viewportOffset.top
});
jQuery.extend(layer[i].content[n], {
posxrat: (layer[i].content[n].x + layer[i].content[n].width/2) / layer[i].width,
posyrat: (layer[i].content[n].y + layer[i].content[n].height/2) / layer[i].height
});
}
}
}
function moveLayers(layer, xratio, yratio) {
var xpos;
var ypos;
var cssObject;
for (var i=0; i<layer.length; i++) {
// Calculate the moving factor
xpos = layer[i].xtravel * xratio + layer[i].xoffset;
ypos = layer[i].ytravel * yratio + layer[i].yoffset;
cssObject = {};
// Do the moving by pixels or by ratio depending on travelpx
if (layer[i].xparallax) {
if (layer[i].xtravelpx) {
cssObject.marginLeft = xpos * -1 + 'px';
}
else {
cssObject.left = xpos * 100 + '%';
cssObject.marginLeft = xpos * layer[i].width *-1 + 'px';
}
}
if (layer[i].yparallax) {
if (layer[i].ytravelpx) {
cssObject.marginTop = ypos * -1 + 'px';
}
else {
cssObject.top = ypos * 100 + '%';
cssObject.marginTop = ypos * layer[i].height * -1 + 'px';
}
}
layer[i].element.css(cssObject);
}
}
// PLUGIN DEFINITION **********************************************************************
jQuery.fn.jparallax = function(options) {
// Organise settings into objects (Is this a bit of a mess, or is it efficient?)
var settings = jQuery().extend({}, jQuery.fn.jparallax.settings, options);
var settingsLayer = {
xparallax: settings.xparallax,
yparallax: settings.yparallax,
xorigin: settings.xorigin,
yorigin: settings.yorigin,
xtravel: settings.xtravel,
ytravel: settings.ytravel
};
var settingsMouseport = {
element: settings.mouseport,
takeoverFactor: settings.takeoverFactor,
takeoverThresh: settings.takeoverThresh
};
if (settings.mouseport) settingsMouseport['element'] = settings.mouseport;
// Populate layer array with default settings
var layersettings = [];
for(var a=1; a<arguments.length; a++) {
layersettings.push( jQuery.extend( {}, settingsLayer, arguments[a]) );
}
// Iterate matched elements
return this.each(function() {
// VAR
var localmouse = {
x: 0.5,
y: 0.5
};
var virtualmouse = {
x: 0.5,
y: 0.5
};
var timer = {
running: false,
frame: settings.frameDuration,
fire: function(x, y) {
positionMouse(mouseport, localmouse, virtualmouse);
moveLayers(layer, virtualmouse.x, virtualmouse.y);
this.running = setTimeout(function() {
if ( localmouse.x!=x || localmouse.y!=y || !mouseport.ontarget ) {
timer.fire(localmouse.x, localmouse.y);
}
else if (timer.running) {
timer.running=false;
}
}, timer.frame);
}
};
var viewport = {element: jQuery(this)};
var mouseport = jQuery.extend({}, {element: viewport.element}, settingsMouseport, {
xinside: false, // is the mouse inside the mouseport's dimensions?
yinside: false,
active: false, // are the mouse coordinates still being read?
ontarget: false // is the top layer inside the takeoverThresh?
});
var layer = [];
// FUNCTIONS
function matrixSearch(layer, ref, callback) {
for (var i=0; i<layer.length; i++) {
var gotcha=false;
for (var n=0; n<layer[i].content.length; n++) {
if (layer[i].content[n].anchor==ref) {
callback(i, n);
return [i, n];
}
}
}
return false;
}
// RUN
setupPorts(viewport, mouseport);
// Cycle through and create layers
for (var i=0; i<viewport.element.children().length; i++) {
// Create layer from settings if it doesn't exist
layer[i]=jQuery.extend({}, settingsLayer, layersettings[i], {
element: viewport.element.children('*:eq('+i+')')
});
setupLayer(layer, i, mouseport);
if (settings.triggerResponse) {
setupLayerContents(layer, i, viewport.element.offset());
}
}
// Set up layers CSS and initial position
viewport.element.children().css('position', 'absolute');
moveLayers(layer, 0.5, 0.5);
// Mouse Response
if (settings.mouseResponse) {
jQuery().mousemove(function(mouse){
// Is mouse inside?
mouseport.xinside = (mouse.pageX >= mouseport.left && mouse.pageX < mouseport.width+mouseport.left) ? true : false;
mouseport.yinside = (mouse.pageY >= mouseport.top && mouse.pageY < mouseport.height+mouseport.top) ? true : false;
// Then switch active on.
if (mouseport.xinside && mouseport.yinside && !mouseport.active) {
mouseport.ontarget = false;
mouseport.active = true;
}
// If active is on give localmouse coordinates
if (mouseport.active) {
if (mouseport.xinside) { localmouse.x = (mouse.pageX - mouseport.left) / mouseport.width; }
else { localmouse.x = (mouse.pageX < mouseport.left) ? 0 : 1; }
if (mouseport.yinside) { localmouse.y = (mouse.pageY - mouseport.top) / mouseport.height; }
else { localmouse.y = (mouse.pageY < mouseport.top) ? 0 : 1; }
}
// If mouse is inside, fire timer
if (mouseport.xinside && mouseport.yinside) { if (!timer.running) timer.fire(localmouse.x, localmouse.y); }
else if (mouseport.active) { mouseport.active = false; }
});
}
// Trigger Response
if (settings.triggerResponse) {
viewport.element.bind("jparallax", function(event, ref){
ref = stripFiletype(ref);
matrixSearch(layer, ref, function(i, n) {
localmouse.x = layer[i].content[n].posxrat * (layer[i].diffxrat + 1) - (0.5 * layer[i].diffxrat);
localmouse.y = layer[i].content[n].posyrat * (layer[i].diffyrat + 1) - (0.5 * layer[i].diffyrat);
if (!settings.triggerExposesEdges) {
if (localmouse.x < 0) localmouse.x = 0;
if (localmouse.x > 1) localmouse.x = 1;
if (localmouse.y < 0) localmouse.y = 0;
if (localmouse.y > 1) localmouse.y = 1;
}
mouseport.ontarget = false;
if (!timer.running) timer.fire(localmouse.x, localmouse.y);
});
});
}
// Window Resize Response
jQuery(window).resize(function() {
setupPorts(viewport, mouseport);
for (var i=0; i<layer.length; i++) {
setupLayer(layer, i, mouseport);
}
});
});
};
// END OF PLUGIN DEFINITION **********************************************************************
// PLUGIN DEFAULTS
jQuery.fn.jparallax.settings = {
mouseResponse: true, // Sets mouse response
mouseActiveOutside: false, // Makes mouse affect layers from outside of the mouseport.
triggerResponse: true, // Sets trigger response
triggerExposesEdges: false, // Sets whether the trigger pulls layer edges into view in trying to centre layer content.
xparallax: true, // Sets directions to move in
yparallax: true, //
xorigin: 0.5, // Sets default alignment - only comes into play when travel is not 1
yorigin: 0.5, //
xtravel: 1, // Factor by which travel is amplified
ytravel: 1, //
takeoverFactor: 0.65, // Sets rate of decay curve for catching up with target mouse position
takeoverThresh: 0.002, // Sets the distance within which virtualmouse is considered to be on target, as a multiple of mouseport width.
frameDuration: 25 // In milliseconds
};
// RUN
initOrigin(jQuery.fn.jparallax.settings);
jQuery(function() {
});
// END CLOSURE
})(jQuery);
Merci d’avoir suivi ce tuto et merci de bien vouloir partager si ça vous a plu…