SPIP-Contrib

SPIP-Contrib

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

286 Plugins, 197 contribs sur SPIP-Zone, 300 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

  • Mode portail Communiquant pour SoyezCréateurs

    29 septembre 2010 – 19 commentaires

    5e mode d’affichage de la page d’accueil, ce mode se distingue des autres par une animation proposant un fondu/enchaîné des logos des articles à la une. Zonage Configuration Zone d’entête Nom du site Slogan si plugin bandeau présent (...)

  • Plugin Logo SVG : pouvoir utiliser des logos SVG

    17 octobre – commentaires

    Le SVG est un format vectoriel donc très léger et redimensionnable sans pertes, mais SPIP ne l’acceptait pas sur les logos. Ce plugin comble ce manque. Comment ça fonctionne ? Vous installez ce plugin, vous l’activez, et c’est tout. Crédits Une (...)

  • Utilisez le framework Foundation dans vos squelettes !

    13 août 2013 – 58 commentaires

    Foundation est un framework CSS et Javascript très complet pour réaliser des sites sur une grille propre et homogène. Mais surtout, il permet de rendre un site responsive très facilement ! Ce plugin ajoute le framework Foundation sur l’espace (...)

  • LinkCheck : vérificateur de liens

    13 février 2015 – 65 commentaires

    Ce plugin permet de chercher et tester l’ensemble des liens présents dans les objets. Vous pourrez donc en quelques clics connaître les liens brisés ou défectueux qui se sont immiscés dans le contenu de votre site SPIP. La vérification s’effectue en (...)

  • GIS 4

    11 août 2012 – 1288 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)

Ça spipe par là