CATALOGUE Design et Infographie Formation InDesign InDesign CC - Créer une Web App avec in5

Comment créer un bloc défilant d'images

Retour à la formation
Chapitre 6 Leçon 5
Précédent
Suivant

Découvrez comment insérer des images panoramiques dans un bloc défilant horizontal.

Détails de la leçon

Description de la leçon

Dans ce tutoriel, nous vous expliquons la mise en œuvre d'un bloc défilant utilisant une image au lieu du texte. Le procédé reste similaire : découpez votre image ou votre bloc de texte et insérez-le dans le container dédié.

La particularité ici repose sur l'utilisation d'une image panoramique qui défilera horizontalement, d'où l'importance de spécifier un sens de défilement horizontal. Si vous réduisez la taille de la page après avoir double-cliqué sur le bloc, vous observerez clairement le défilement de l'image de droite à gauche. Comme pour le texte, diverses options de paramétrage sont disponibles : indications de défilement, positionnement initial (au centre ou en haut à gauche, par exemple).

Ce tutoriel s'adresse à toute personne souhaitant dynamiser ses pages web avec des blocs défilants, qu'ils soient composés de texte ou d'images.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de :

  • Comprendre la technique d'insertion d'images dans un bloc défilant.
  • Savoir configurer les options de défilement et de positionnement.

Prérequis pour cette leçon

Avoir des connaissances de base en développement web et en manipulation de blocs HTML.

Métiers concernés

Ce tutoriel est particulièrement utile pour les métiers de développeur web, designer UX/UI et intégrateur web.

Alternatives et ressources

Pour des solutions similaires, vous pouvez utiliser des bibliothèques comme jQuery ou des frameworks CSS tels que Bootstrap pour intégrer des carrousels d'images.

Questions & Réponses

La spécificité est le défilement horizontal de l'image panoramique, qui est implémenté de manière similaire à un bloc de texte.
Oui, il est possible de régler la position initiale de l'image, en la centrant ou en la positionnant en haut à gauche.
Les options communes incluent les indicateurs de défilement et le paramétrage de la position initiale de l'élément.