SPIP-Contrib

SPIP-Contrib

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

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

  • cimobile : plugin « détection et aiguillage des téléphones mobiles »

    20 septembre 2011 – 113 commentaires

    Le plugin « cimobile » détecte les téléphones mobiles et les aiguille vers le jeu de squelettes correspondant. Pour détecter un mobile, il prend en compte le « User-Agent », un cookie, un paramètre d’URL, une URL spécifique pour mobile. Il n’utilise pas (...)

  • ScolaSPIP 4

    19 janvier 2016 – 276 commentaires

    ScolaSPIP est plugin-squelette responsive personnalisable pour sites Web d’établissements scolaires basé sur SPIPr Présentation de ScolaSPIP Ce plugin pour SPIP 3 est développé par la Dane de l’académie de Versailles pour les webmestres de cette (...)

  • SPIP 3, Agenda et FullCalendar

    6 août 2012 – 317 commentaires

    Depuis SPIP 3, l’affichage d’un agenda sous forme de calendrier par jour/semaine/mois à changé. Les filtres |agenda_memo et apparentés sont désormais obsolètes. Il en est de même pour les filtres agendafull_memo et apparentés du plugin Agenda. (...)

  • Couleur de Rubrique

    9 juin 2012 – 58 commentaires

    Le plugin Couleur de rubrique est maintenant adapté à SPIP3. Il permet d’attribuer une couleur par rubrique de façon très simple : un bloc est ajouté sur la page rubrique de l’administration de votre site, qui vous permet de déterminer une couleur, de (...)

  • Passer un site SPIP sous https://

    23 février – 15 commentaires

    Comment migrer simplement votre site SPIP de http:// vers https:// Le protocole https:// devient de plus en plus courant : C’est mieux pour la vie privée de tous La plupart des grands sites l’a déjà adopté Certains navigateurs commencent à afficher (...)