Skip to main content

Deux petits tutos sur 2 fonctions qui font qu’on aime particulièrement la solution Pandasuite, à lire sur le blog des Pandas : la synchronisation entre éléments et la création d’effets parallaxes dans votre application.
a

Synchroniser des éléments

La synchronisation vous permet de coordonner entre eux les éléments de votre choix (deux et même plus). Une synchronisation se définit sous la forme d’un groupe. Pour chaque élément, vous choisissez le paramètre à synchroniser avec les autres éléments. En fonction du type d’élément, vous avez accès à différents paramètres : pages, valeurs en x, valeurs en y, marqueurs, valeurs de zoom….

https://vimeo.com/135337157

Exemple :

  • Synchroniser les pages d’une galerie et une zone de défilement verticale
  • Insérez un composant Galerie et un composant Zone de Défilement : paramétrez-les comme vous voulez.
  • Insérez un composant Synchronisation et dans la fenêtre Propriétés, sélectionnez les deux composants.
  • Définissez les paramètres synchronisables pour chacun de ces éléments : les pages pour la Galerie et les positions en « y » pour la Zone de Défilement (car le défilement est vertical.

L’effet Parallaxe

parallaxe

Exemple :

  • Créer un effet Parallaxe à partir de deux zones de défilement vertical.
  • Créez une première zone de défilement dont la zone visible couvre l’ensemble de l’écran.
  • Définissez un défilement vertical dans la fenêtre Propriétes et cachez la barre de défilement.
  • Modifiez la hauteur du contenu à 1067 px et insérez dans votre zone les éléments de premier plan de votre choix.
  • Créez une deuxième zone de défilement de la même manière : cette fois-ci, définissez une hauteur de 1125 px et insérez vos éléments d’arrière-plan dedans.
  • Insérez un composant Synchronisation : dans la fenêtre Propriétés, sélectionnez les deux composants Zones de défilement et synchronisez les positions en y dans les deux cas.
href="https://pandasuite.com/fr/articles/k01/utiliser-synchronisation" data-color-override="false" data-hover-color-override="false" data-hover-text-color-override="#fff">Button Text href="https://blog.pandasuite.com/fr/effet-parallaxe/" data-color-override="false" data-hover-color-override="false" data-hover-text-color-override="#fff">Button Text
Valéry Girou

D.A. / DIGITAL / WEB / PRINT / Co-fondateur du site ELECTRICNEWS.fr / Consultant & Formateur Digital / Web / Print

Pin It on Pinterest