CATALOGUE Code & Data Formation Bubble Bubble - Créer une marketplace sans coder de A à Z Effets Visuels Avancés avec Floating Groups dans Bubble.io

Effets Visuels Avancés avec Floating Groups dans Bubble.io

Astuce design pour améliorer le header
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Bubble - Créer une marketplace sans coder de A à Z
Revoir le teaser Je m'abonne
Transcription
Cette leçon fait partie de la formation
59,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
Cette leçon fait partie de la formation
59,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Introduction à l'utilisation des Floating Groups

Objectifs

Les objectifs de cette vidéo incluent la compréhension et l'application des floating groups pour créer des headers dynamiques et accroître l'engagement visuel des utilisateurs.

Résumé

Apprenez à créer un effet visuel dynamique sur le header en utilisant des floating groups et une opacité conditionnelle dans Bubble.io.

Description

Dans cette leçon, nous explorons l'utilisation des floating groups dans Bubble.io pour créer des effets visuels captivants. Le floating group est un élément puissant qui vous permet de garder une section, comme un header, toujours visible à mesure que l'utilisateur défile sur la page. Nous allons configurer ce groupe pour qu'il devienne partiellement transparent lorsque l'utilisateur défile, en appliquant une condition sur la position de défilement actuelle de la page. Cela permet un impact visuel subtil mais efficace, attirant l'attention sans obstruer le contenu sous-jacent.

Par ailleurs, nous ajouterons une seconde condition pour restaurer l'opacité maximale lorsque l'utilisateur survole le groupe. Cela améliore non seulement l'esthétique générale de la page, mais améliore également l'expérience utilisateur en rendant les éléments du header facilement accessibles à tout moment. Ce tutoriel couvre également l'ajustement nécessaire du layout global pour assurer la compatibilité des floating groups avec les autres éléments UX/UI de votre application.

Voir plus

Questions fréquentes

Quel est l'avantage principal d'utiliser un floating group sur un header dans Bubble.io?
L'avantage principal est que le header reste visible même lorsque l'utilisateur défile, améliorant ainsi l'accessibilité et l'interactivité de la page.
Comment configurer l'opacité d'un floating group lors du défilement?
On peut configurer l'opacité en utilisant une condition basée sur la position de défilement actuelle de la page, pour réduire l'opacité lorsque cette position dépasse un certain seuil.
Quels ajustements de layout sont nécessaires lorsque l'on utilise des floating groups?
Il faut ajuster les marges des autres éléments de la page pour que l'affichage soit cohérent, en tenant compte de la hauteur du floating group.

Programme détaillé