Parallax transform et opacity
Mieux
En modifiant uniquement les éléments transform et opacity des objets parallaxés, on gagne en performance par rapports aux parallax qui modifient les margin, padding, top, left, etc. Alors, c'est mieux.
Fonctionnement du plugin
Inclure le plugin à sa page
<script type="text/javascript" src="js/regaloebParallax-plugin.js"></script>
Déclarer les objets au domready
$('.js-regaloeb-parallax').regaloebParallax();
HTML
On détermine les propriétés à animer avec des attributs "data-XXX".
L'attribut data-x="INITIAL#FINAL" indique que le translateX sera modifiée via la propriété translate3d.
L'attribut data-y="INITIAL#FINAL" indique que la translateY sera modifiée via la propriété translate3d.
L'attribut data-scale="INITIAL#FINAL" indique que la scale sera modifiée, INITIAL: scale initiale, FINAL: scale finale.
L'attribut data-rotate="INITIAL#FINAL" indique que la rotation sera modifiée, INITIAL: rotate initiale, FINAL: rotate finale.
L'attribut data-skewX="INITIAL#FINAL" indique que le skewX sera modifiée, INITIAL: skewX initiale, FINAL: skewX finale.
L'attribut data-skewY="INITIAL#FINAL" indique que le skewY sera modifiée, INITIAL: skewY initiale, FINAL: skewY finale.
L'attribut data-o="INITIAL#FINAL" indique que l'opacité sera modifiée.
L'attribut data-end="NUM" indique à quel endroit du viewport l'objet atteint ses valeurs finales : 2 = au milieu, 3 = au 2/3, 1 au scroll 0. Valeur par défaut: 2.
Lorsque l'élément arrive dans le viewport, la propriété prend la valeur INITIAL
À l'endroit du viewport déterminé par data-end (au milieu par défaut), la propriété prend la valeur FINAL.
Petit truc : en rajoutant une transition sur le transform et l'opacity, l'objet continue à "bouger" à la fin du scroll (plus ou moins longtemps selon la durée de la transition - ici : 0.3s).
Github repository: https://github.com/regaloeb/regaloebParallax
data-rotate="360#0"
data-x="500#0"
data-x="-500#0"
data-y="-200#0"
data-scale="0#1"
data-scale="2#1"
data-o="0#0.5"
data-skewX="50#0"
data-skewY="50#0"
data-skewX="50#0" data-skewY="50#0"
data-rotate="360#0" data-x="true" data-x-depth="-2" data-o="0#1" data-scale="0#1"
data-rotate="360#0" data-end="1"
Pour parallaxer un background, il faut ruser...
Un conteneur principal (.bg) avec position: relative; et overflow: hidden;
L'élément parallaxé est en position: absolute; z-index: -1; left: -50%; top: 0; width: 200%; height: 200%; background-position: 50% 50%; et il a une image de fond plus grande que son conteneur.
On y applique un data-y="INITIAL#FINAL".
Avec un data-x="INITIAL#FINAL".
Avec data-x="INITIAL#FINAL" + data-y="INITIAL#FINAL".
Avec un data-x="INITIAL#FINAL" et data-end="2".
Autre méthode bien plus simple car on n'utilise pas le plugin !! :
Juste appliquer un background-fixed au conteneur !
Mais beaucoup de mobiles ne comprennent pas le background-fixed (les nazes)...