Effet parallaxe gràce à JQuery et JParallax

L’effet “parallaxe”, qu’es aquò ?

Il s’agit d’un effet graphique donnant l’illusion d’une profondeur entre plusieurs éléments.
Le principe est assez simple à comprendre : on décompose notre élément global en plusieurs sous éléments, chacun d’entre eux symbolisant une profondeur différente.
On peut comparer ce principe à celui des calques présents dans tous les bons logiciels de création d’images.
Une fois nos différents calques positionnés, par ordre de profondeur, il devient possible de simuler cette profondeur en les faisant réagir différemment selon leur éloignement.
Ces calques peuvent réagir à toute sorte d’action (clique, scroll, timer...) JavaScript.

Plus d’infos sur l’effet parallaxe chez Alsacréations :

http://www.alsacreations.com/tuto/lire/1417-zoom-sur-effet-parallaxe.html

Il existe des outils très pratiques pour mettre en place simplement cet effet.
C’est le cas du plugin pour JQuery JParallax de stephband.

Ce dont nous avons besoin

Pour pouvoir utiliser JParallax avec SPIP 2.1, nous avons besoin de plusieurs petites choses :

• Le plugin JParallax
• JQuery dans sa versions 1.6.x

Note : attention, à l’heure ou j’écris ces lignes, la version de JParallaxe utilisée dans cet article (1.0) n’est pas présente sur le site de son auteur. Passez par github pour être certain d’avoir cette version 1.0.

Maintenant que nous avons les fichiers nécessaires, voyons comment les utiliser.

Surcharge de JQuery (site public)

Pour fonctionner, Jparallaxe nécessite l’utilisation de la librairie JQuery, version 1.6.x.
Hors, SPIP 2.1 inclut JQuery dans sa version 1.4.1.

Edit : Il semblerait en fin de compte que Jparallaxe fonctionne sans devoir surcharger JQuery. Je laisse tout de même cette partie du tuto, ça peut être intéressant dans d’autres cas.

Pour pallier à ce problème, nous allons demander à SPIP d’utiliser le fichier JavaScript de la librairie JQuery que nous venons de télécharger, plus récent, plutôt que celui par défaut.

Pour ce faire, il suffit de placer cette nouvelle librairie dans le dossier javascript de votre dossier squelettes.
S’il n’existe pas, c’est le moment de le créer ;)
Afin que SPIP comprenne qu’il doit utiliser ce fichier plutôt que le fichier JQuery par défaut, il est nécessaire de le renommer en jquery.js .

Recalculez une des pages publiques de votre site SPIP et observez le code source.
Entre les balises

devrait se trouver la ligne suivante :

<script src="squelettes/javascript/jquery.js" type="text/javascript"></script>

Cette ligne nous assure que la version de JQuery fraichement téléchargée est bien utilisée par SPIP, pour la partie publique de notre site.
JParallax peut maintenant fonctionner, il est temps de s’en occuper.

Installation et chargement de JParallax

Comme pour JQuery, nous allons placer le fichier JavaScript de JParallax dans le dossier squelettes/javascript/.

Il faut maintenant faire comprendre à SPIP que nous voulons utiliser ce fichier JavaScript.
Pour ce faire, rendez vous dans le dossier config de votre site SPIP. Nous allons y modifier le fichier mes_options.php. Comme précédemment, s’il n’existe pas, créez le.

Nous allons utiliser les pipelines de SPIP pour indiquer à JQuery qu’un de ses plugins vient se joindre à la fête, et plus précisément le pipeline jquery_plugins .

$GLOBALS['spip_pipeline']['jquery_plugins'] .= "|prefixPlugin_jquery_plugins";

function prefixPlugin_jquery_plugins($scripts){
        $scripts[] = "javascript/jquery.jparallax.js";
        return $scripts;
    }

Grâce à ces quelques lignes, vous devriez voir apparaitre la ligne

<script src="squelettes/javascript/jquery.jparallax.js" type="text/javascript"></script>

entre les balises

du code source de votre page.

JParallax est maintenant chargé, et peut être appelé !

Appel de JParallax

Dans l’exemple proposé ici, nous allons intégrer l’effet de parallaxe à un élément de notre entête, élément présent sur toutes les pages. L’appel à JParallax doit donc s’effectuer quelque soit la page affichée.
C’est pourquoi nous allons insérer le code suivant dans le fichier inc-head.html de notre site SPIP, après la balise #INSERT_HEAD.

<script type='text/javascript'>
	jQuery(document).ready(function(){
	
		jQuery('.parallax-layer').parallax({
			mouseport: jQuery("#parallax"), yparallax: false
		});
		
	});
</script>

Nous faisons ici appel à JParallax une fois que le document est près, pour les éléments possédants la classe .parallax-layer .
Les options spécifiées indiquent que les déplacements de nos différents calques seront calculés en fonction de la position de la souris dans l’élément ayant pour id parallax, et nous désactivons le calcul sur y (choix personnel).

Pour plus d’infos sur le fonctionnement et les options de JParallax, je vous invite à consulter la page de l’auteur ainsi que les démos et autres fichiers sur github.

Intégrer l’effet dans notre page

Résumons :

• Nous avons surchargé JQuery afin d’être compatible avec JParallax
• Nous avons chargé JParallax
• Nous avons appelé JParallax à l’endroit désiré.

Il ne nous reste plus qu’à intégrer l’élément qui va recevoir l’effet parallaxe.

Ici nous souhaitons l’intégrer à l’entête commune à toutes nos pages
Nous allons donc créer une div, d’id=« parallax » dans le fichier inc-entete.html.
Rappelez vous, JParallax va utiliser l’élément du DOM d’id=« parallax » pour calculer l’effet. Dans l’exemple proposé ici, les calculs vont donc s’effectuer par rapport à l’élément contenant (les calques de) l’effet.
Pour plus de contrôle, nous allons lui affecter des valeurs width et height dans notre fichier css (pour ma part dans habillage.css).

#parallax	{ position: relative; /*overflow: hidden;*/ width: 445px; height: 200px; margin: 0 auto;}

Attention, il est important de spécifier la propriété position : relative afin que JParallax positionne bien les différents calques par rapport à l’élément parent, et non par rapport au document.
J’ai commenté la propriété overflow : hidden par choix personnel, le dépassement ne me dérange pas dans cet exemple.

Revenons dans notre code HTML.
Nous allons maintenant ajouter nos différents calques, ici des images.

<div id="parallax">
			<img class="parallax-layer" src="#CHEMIN{images/Parallax_fond.png}" style="width: 445px; height: 200px;" />
			<img class="parallax-layer" src="#CHEMIN{images/Parallax_01.png}" style="width: 455px; height: 204px;" />
			<img class="parallax-layer" src="#CHEMIN{/images/Parallax_02.png}" style="width: 475px; height: 213px;" />
			<img class="parallax-layer" src="#CHEMIN{images/Parallax_03.png}" style="width: 505px; height: 227px;" />
			<img class="parallax-layer" src="#CHEMIN{images/Parallax_04.png}" style="width: 545px; height: 245px;" />
		</div>

N’oubliez pas de spécifier la classe class=« parallax-layer » à vos éléments, ainsi qu’une hauteur et une largeur. L’effet de profondeur va être calculé en fonction de ces deux valeurs, le calque le plus éloigné étant toujours plus petit que les calques plus proches.

Nous allons ensuite créer une règle CSS pour la classe .parallax-layer, contenant la propriété position : absolute .
L’élément parent étant positionné en relative, nous avons la certitude que les positions absolues de nos calques seront exprimées par rapport a leur parent.

Recalculez la page, la magie devrait opérer.