SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 272 visiteurs en ce moment

Accueil > Documentation > Tutoriels pour webmasters > Effet parallaxe gràce à JQuery et JParallax

Effet parallaxe gràce à JQuery et JParallax

1er juin 2012 – par The_Moye – commentaires

3 votes

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 :

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 :

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 .

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

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.

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).

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.

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.

Dernière modification de cette page le 5 juin 2012

Retour en haut de la page

Vos commentaires

  • Le 28 janvier 2013 à 11:16, par Flo En réponse à : Effet parallaxe gràce à JQuery et JParallax

    Bonjour, désolée mais je ne comprends pas grand chose car totalement profane en matière de javascript. quelles sont les manips à effectuer exactement... surtout par rapport au plugin.
    j’ai essayé de suivre les indications mais ça ne fonctionne pas... enfin j’ai l’effet parallaxe mais le javascript n’a pas l’air de marcher

    je précise que j’ai spip 3.0, je ne sais pas si la manip est la même

    merci d’avance

    • Le 1er février 2013 à 16:51, par The_Moye En réponse à : Effet parallaxe gràce à JQuery et JParallax

      Bonjour Flo,

      Je ne comprends pas ton problème. C’est JavaScript qui gère l’effet de parallaxe, en toute logique, si l’effet marche c’est que le JavaScript fonctionne.
      Peux tu m’en dire plus ?

    • Le 1er février 2013 à 17:07, par Flo En réponse à : Effet parallaxe gràce à JQuery et JParallax

      oups, désolée je n’ai pas répondu au bon endroit... mais au-dessus
      je remets mon commentaire

      merci pour cette réponse.
      depuis j’ai bricolé un truc à partir d’un modèle. j’avoue ne pas encore tout comprendre mais bon, je le fais sans javascript. uniquement en css. très long à mettre en place. là je bloque sur une balise inclure d’article sur la page sommaire pour pouvoir continuer d’utiliser le filtre generer_url_entite

    Répondre à ce message

  • Le 8 juin 2012 à 09:09, par Lexi En réponse à : Effet parallaxe gràce à JQuery et JParallax

    Salut,
    j’utilise parallax depuis plusieurs mois pour mettre en mouvement mes caricatures. Ici, Elton John au piano :
    http://caricature.in/?JOHN-Elton&debut_page=@7
    Woody Allen :
    http://caricature.in/?ALLEN-Woody&debut_page=@12
    Keith JARRETT :
    http://caricature.in/?JARRETT-Keith&debut_page=@2

    Dommage qu’on ne puisse pas adapter les dimensions du cadre parallax en fonction de l’article, ces dimensions sont gravées dans le marbre de la css.

    Ou, est-ce possible ?
    Salutations spipiennes,

    Lexi

    • Le 8 juin 2012 à 09:58, par The_Moye En réponse à : Effet parallaxe gràce à JQuery et JParallax

      Salut Lexi, sympas ces caricatures ^^

      Je ne me suis pas penché sur la question, mais il est probable qu’en JavaScript tu puisses régler la question.
      Par contre je ne sais pas si les déplacements des calques dépendent de la taille du canvas parallax à l’initialisation, ou bien si un redimensionnement à chaud peut passer.

    • Le 1er février 2013 à 17:05, par Flo En réponse à : Effet parallaxe gràce à JQuery et JParallax

      merci pour cette réponse.
      depuis j’ai bricolé un truc à partir d’un modèle. j’avoue ne pas encore tout comprendre mais bon, je le fais sans javascript. uniquement en css. très long à mettre en place. là je bloque sur une balise inclure d’article sur la page sommaire pour pouvoir continuer d’utiliser le filtre generer_url_entite

    Répondre à ce message

  • Le 5 juin 2012 à 08:42, par ? En réponse à : Effet parallaxe gràce à JQuery et JParallax

    s/site publique/site public

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Massicot

    7 octobre 2015 – 63 commentaires

    Recadrez et redimensionnez vos images directement dans l’espace privé de SPIP ! Inspiré par le plugin photospip, ce plugin plus minimaliste permet de recadrer et redimensionner les images dans l’espace privé de SPIP. Une fois le plugin installé (...)

  • Métas

    8 août 2009 – 53 commentaires

    Ce petit plugin permet l’ajout, depuis l’espace privé, de metatags aux articles et rubriques de SPIP, ainsi que la mise en exergue de mots importants.

  • Formidable, le générateur de formulaires

    23 janvier 2012 – 2137 commentaires

    Un générateur de formulaires facilement configurable pour les non-informaticiens et facilement extensible pour les développeurs. Introduction L’objectif était de créer un plugin permettant de générer des formulaires. Historiquement, 2 plugins (...)

  • Formulaire de contact avancé

    23 mars 2009 – 1373 commentaires

    Un formulaire de contact configurable, avec de multiples options.

  • Intranet / Extranet

    31 mai 2013 – 79 commentaires

    Intranet / Extranet est un plugin très simple permettant d’interdire l’accès au site à tout visiteur non identifié. Mise à jour Voir fichier README du plugin. Mise en place La mise en place est rapide. Téléchargez le plugin. Activez (...)