Block : titre

Ce block permet de créer une section animée par la librairie push-in.js, qui est un effet de parallaxe léger, construit avec JavaScript, simulant une animation interactive de travelling ou push-in. Chaque étape est construite avec un calque, ou layer.

Contenu

Le contenu de ce block ne consiste qu’en un groupe répétable de calques, ou layers. Chaque layer se décompose ainsi :

  • Title (text) : un titre technique, non visible dans l’animation
  • Content type (choix) : permet de choisir entre du contenu classique ou un code html personnalisé pour construite le calque
  • Content (contenu) ou code (code html) : c’est dans ces champs qu’il faut renseigner le contenu ou le code html selon l’option choisie précédemment
  • Classes outer et classes inner (texte) : classes css à appliquer au conteneur du calque ou à son conteneur interne
  • In point et Out point (nombres) : valeurs en px de l’apparition et de la disparition du layer lors du scroll dans l’animation
  • Speed (nombre) : vitesse de l’animation du calque

 

Réglages

  • Scene height (nombre) : définit en vh la hauteur globale du conteneur de l’animation
  • Display mode (choix) : simple pour une animation classique, composition pour une animation complexe avec compositions
  • Debug mode (choix) : active ou non la journalisation des erreurs
  • Scroll target (text) :  par défaut sur « window », il est possible d’associer l’animation à un scroll sur un élément de la page et donc d’y renseigner un sélecteur html classe ou ID
  • Mode (choix) : continuous pour afficher les phases de l’animation en continue ou sequential pour les afficher de manière séquentielle
  • Auto-start (choix) : définit le mode de déclenchement de l’animation

Une plus ample documentation est consultable sur pushinjs.com.

Exemples d’utilisation

Page d’exemple