SPIP-Contrib

SPIP-Contrib

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

288 Plugins, 197 contribs sur SPIP-Zone, 203 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

  • MediaBox

    10 mai 2010 – 514 commentaires

    Avertissement Le présent plugin est installé et activé par défaut sur toute les version de SPIP > 3.0. Inutile donc de l’installer manuellement sauf si vous utilisez SPIP 2.1. Aperçu La MediaBox est une Boîte multimédia polyvalente et (...)

  • Sommaire automatique

    31 janvier 2013 – 14 commentaires

    Ce plugin repère les intertitres des textes de vos articles et s’en sert pour génèrer un sommaire. Ce dernier peut être inséré automatiquement au début de chaque article, ou utilisé dans les squelettes pour générer un sommaire sur n’importe quel autre (...)

  • La Fabrique

    20 avril 2012 – 316 commentaires

    La Fabrique est un outil pour webmestres ou développeurs qui souhaitent créer des plugins. La Fabrique est capable de générer le code source minimal d’un plugin pour SPIP 3 (elle accélère donc le démarrage d’un plugin) et peut s’occuper également de (...)

  • Enluminures typographiques V3

    25 juillet 2009 – 186 commentaires

    Les Enluminures typographiques V3 permettent d’ajouter au Porte plume les raccourcis typographiques présents dans le Plugin Barre Typographique Enluminée. C’est une extension du PortePlume. Pour la documentation d’usage, se reporter à celle du (...)

  • Refonte de l’identité graphique

    10 juillet – 36 commentaires

    Lors de la SPIP Party 2017 à Toulouse, un nouveau contributeur est venu nous présenter son travail sur une refonte du logo. Au delà de la refonte du logo, c’est une toute nouvelle identité graphique pour SPIP que Jordan nous propose. Voici une (...)

Ça spipe par là