La parallaxe est, à l’origine, un effet visuel du à la profondeur et à la focale de vos yeux. C’est ce qui nous fait voir flou quelque chose de proche quand on regarde au loin, et surtout donne l’impression, lorsqu’on se déplace en fixant un point, que les éléments du décor se déplacent à une vitesse différente. Sur le web, cet effet a été reproduit et même modifié. Ainsi, vous pouvez provoquer des déplacements d’éléments sur votre site à des vitesses et dans des directions différentes.
La parallaxe est, à l’origine, un effet visuel du à la profondeur et à la focale de vos yeux. C’est ce qui nous fait voir flou quelque chose de proche quand on regarde au loin, et surtout donne l’impression, lorsqu’on se déplace en fixant un point, que les éléments du décor se déplacent à une vitesse différente. Sur le web, cet effet a été reproduit et même modifié. Ainsi, vous pouvez provoquer des déplacements d’éléments sur votre site à des vitesses et dans des directions différentes.
La parallaxe a été utilisée de plusieurs façons, dont deux essentielles : la parallaxe de fond, qui réagit au scrolling, et la parallaxe de positionnement, qui réagit au mouvement de la souris. Je n’aborderait que ce dernier cas, le background parallaxe étant déjà beaucoup abordé sur la toile.
Quelques exemples de parallaxe à la souris
http://www.digitalhands.net/
http://www.bikingboss.com/
Les ressources
Vous trouverez sur le github de stephband le fichier jquery.parallax.js. A l’heure actuelle, la version minimifiée ne fonctionne pas correctement, elle le sera peut-être à l’avenir. Vous pourrez aussi trouver sur son site quelques infos concernant son plugin.
Codons
Il est temps de s’attaquer au code. Pour commencer, un code HTML s’impose.
Code HTML
Il nous faut un conteneur, ici parallax-viewport, des éléments blocks, qui eux-mêmes contiendront vos images. Il est tout à fait possible de rajouter d’autres éléments dans le conteneur principal, ils n’interféreront pas avec parallax.
Code CSS
.parallax-viewport{
position:relative;
overflow:hidden;
width:760px;
height:300px;
}
.parallax-layer{
position:absolute;
}
La taille du conteneur est sans importance, mais doit être définie. Il est également important, pour le fonctionnement de parallax, que la taille du conteneur et celle de ses éléments enfants soient différentes.
Code jQuery
$('.parallax-viewport .parallax-layer').parallax({
mouseport: $('.parallax-viewport')
});
mouseport est une option obligatoire, toutes les autres sont optionnelles. Cette option définit quel est le bloc déclencheur de la parallaxe. Il pourrait d’ailleurs s’agir d’un tout autre bloc que celui contenant nos éléments.
En l’état actuel, passer la souris sur le bloc parallax-viewport déclenche le mouvement de nos éléments enfants, tous simultanément. Vous pouvez séparer les comportement de vos éléments enfants en rajoutant une série d’option par élément présent :
Exemple
$('.parallax-viewport .parallax-layer')
.parallax({
mouseport: $('.parallax-viewport'),
xorigin: 0,
xparallax: 0.7
}, {
mouseport: $('.parallax-viewport'),
xorigin: 0,
xparallax: 0.1
});
Ici, la vitesse de déplacement de mon premier élément sera supérieure à la vitesse du second, provoquant un décalage.
Les options
Nous connaissons déjà mouseport, voici maintenant les autres :
xparallax
Valeur : booléen, pourcentage, pixels ou valeur entre 0 et 1
Défaut : true
Définit la vitesse de déplacement horizontale de votre élément, soit en déterminant la distance maximum à parcourir (valeur en pixels), soit en lui donnant une vitesse par rapport à la vitesse de la souris. Par exemple, 0.5 signifie que l’élément se déplacera à la moitié de la vitesse de la souris. Mettre false interdit le déplacement horizontal.
yparallax
Valeur : booléen, pourcentage, pixels ou valeur entre 0 et 1
Défaut : true
Même principe que xparallax, mais verticalement.
xorigin
Valeur : valeur entre 0 et 1, pourcentage, left, center, middle ou right
Défaut : 0.5
Détermine le point de départ horizontal de la parallaxe. 0 correspond au point le plus à gauche du contenant.
yorigin
Valeur : valeur entre 0 et 1, pourcentage, left, center, middle ou right
Défaut : 0.5
Détermine le point de départ vertical de la parallaxe. 0 correspond au point le plus en haut du contenant.
decay
Valeur : valeur entre 0 et 1
Défaut : 0.66
Détermine le temps entre chaque capture de la position de la souris.
frameDuration
Valeur : temps en millisecondes
Défaut : 30
Détermine le temps entre deux animations des éléments enfants. En cas d’un grand nombre d’éléments, cela peut économiser quelques ressources CPU.
Conclusion
Parallax permet d’obtenir beaucoup d’effets sympathiques : mouvements décalés, effets de reflets, flous se déplaçant devant des éléments plus nets pour accentuer la profondeur, etc. Il faut cependant rester attentif au nombre d’élements soumis à la parallaxe : plus il y en a, plus les ressources nécessaires sont importantes, et plus votre site risque d’être lourd. A utiliser avec parcimonie.
La parallaxe a été utilisée de plusieurs façons, dont deux essentielles : la parallaxe de fond, qui réagit au scrolling, et la parallaxe de positionnement, qui réagit au mouvement de la souris. Je n’aborderait que ce dernier cas, le background parallaxe étant déjà beaucoup abordé sur la toile.
Quelques exemples de parallaxe à la souris
http://www.digitalhands.net/
http://www.bikingboss.com/
Les ressources
Vous trouverez sur le github de stephband le fichier jquery.parallax.js. A l’heure actuelle, la version minimifiée ne fonctionne pas correctement, elle le sera peut-être à l’avenir. Vous pourrez aussi trouver sur son site quelques infos concernant son plugin.
Codons
Il est temps de s’attaquer au code. Pour commencer, un code HTML s’impose.
Code HTML
Il nous faut un conteneur, ici parallax-viewport, des éléments blocks, qui eux-mêmes contiendront vos images. Il est tout à fait possible de rajouter d’autres éléments dans le conteneur principal, ils n’interféreront pas avec parallax.
Code CSS
.parallax-viewport{
position:relative;
overflow:hidden;
width:760px;
height:300px;
}
.parallax-layer{
position:absolute;
}
La taille du conteneur est sans importance, mais doit être définie. Il est également important, pour le fonctionnement de parallax, que la taille du conteneur et celle de ses éléments enfants soient différentes.
Code jQuery
$('.parallax-viewport .parallax-layer').parallax({
mouseport: $('.parallax-viewport')
});
mouseport est une option obligatoire, toutes les autres sont optionnelles. Cette option définit quel est le bloc déclencheur de la parallaxe. Il pourrait d’ailleurs s’agir d’un tout autre bloc que celui contenant nos éléments.
En l’état actuel, passer la souris sur le bloc parallax-viewport déclenche le mouvement de nos éléments enfants, tous simultanément. Vous pouvez séparer les comportement de vos éléments enfants en rajoutant une série d’option par élément présent :
Exemple
$('.parallax-viewport .parallax-layer')
.parallax({
mouseport: $('.parallax-viewport'),
xorigin: 0,
xparallax: 0.7
}, {
mouseport: $('.parallax-viewport'),
xorigin: 0,
xparallax: 0.1
});
Ici, la vitesse de déplacement de mon premier élément sera supérieure à la vitesse du second, provoquant un décalage.
Les options
Nous connaissons déjà mouseport, voici maintenant les autres :
xparallax
Valeur : booléen, pourcentage, pixels ou valeur entre 0 et 1
Défaut : true
Définit la vitesse de déplacement horizontale de votre élément, soit en déterminant la distance maximum à parcourir (valeur en pixels), soit en lui donnant une vitesse par rapport à la vitesse de la souris. Par exemple, 0.5 signifie que l’élément se déplacera à la moitié de la vitesse de la souris. Mettre false interdit le déplacement horizontal.
yparallax
Valeur : booléen, pourcentage, pixels ou valeur entre 0 et 1
Défaut : true
Même principe que xparallax, mais verticalement.
xorigin
Valeur : valeur entre 0 et 1, pourcentage, left, center, middle ou right
Défaut : 0.5
Détermine le point de départ horizontal de la parallaxe. 0 correspond au point le plus à gauche du contenant.
yorigin
Valeur : valeur entre 0 et 1, pourcentage, left, center, middle ou right
Défaut : 0.5
Détermine le point de départ vertical de la parallaxe. 0 correspond au point le plus en haut du contenant.
decay
Valeur : valeur entre 0 et 1
Défaut : 0.66
Détermine le temps entre chaque capture de la position de la souris.
frameDuration
Valeur : temps en millisecondes
Défaut : 30
Détermine le temps entre deux animations des éléments enfants. En cas d’un grand nombre d’éléments, cela peut économiser quelques ressources CPU.
Conclusion
Parallax permet d’obtenir beaucoup d’effets sympathiques : mouvements décalés, effets de reflets, flous se déplaçant devant des éléments plus nets pour accentuer la profondeur, etc. Il faut cependant rester attentif au nombre d’élements soumis à la parallaxe : plus il y en a, plus les ressources nécessaires sont importantes, et plus votre site risque d’être lourd. A utiliser avec parcimonie.
