Concevoir un carrousel interactif en HTML, CSS et JavaScript

Conception d'un carrousel en HTML et CSS

• Nous commençons par concevoir ce système de carrousel dans Figma, en mettant en place les transitions entre toutes les valeurs.

• Ensuite, nous allons le construire en HTML.

• Nous importons d'abord l'image générée lors de la conception en cours dans Figma.

• En créant notre frame dans Figma, nous optons pour l'un des modèles d'iPhone en raison de l'interface mobile.

• En utilisant l'outil ellipse et en maintenant la touche option et shift, nous dessinons des cercles parfaits depuis le centre, que nous dupliquons pour les espacer de manière égale.

• Ensuite, nous déplaçons les cercles pour pouvoir extraire les gradients à l'aide de l'outil de sélection de couleur.

• Nous appliquons également une ombre portée à l'ensemble des cercles.

• Enfin, nous ajoutons le texte correspondant à l'interface en assortissant les couleurs, la position et la police.

Conception d'un carrousel en HTML et CSS

Création de superbes images de héros

• Nous commençons par ajuster les tailles du texte dans l'interface utilisateur.

• Ensuite, nous travaillons sur les formes, les bordures et les lignes des éléments.

• Nous créons un rectangle pour l'en-tête et y appliquons un dégradé pour la partie supérieure.

• En ajoutant un autre rectangle, nous créons un dégradé sur le côté gauche avec une légère ombre.

• Nous améliorons les images de héros en les ouvrant dans Photoshop, en les agrandissant et en utilisant un plugin de stabilisation.

• Le plugin de Photoshop nous permet d'écrire une description de notre image, d'ajuster la taille à 1024 pixels et de l'intégrer dans le document.

Création de superbes images de héros

Création de masque et création de carrousel

• Utiliser l'outil plume pour dessiner un chemin autour de la zone à masquer

• Clic droit sur le chemin et choisir 'Créer un masque vectoriel'

• Cliquer sur le bouton de masque dans le panneau des calques

• Utiliser l'outil baguette magique pour sélectionner le contour de l'image

• Sélectionner le masque et peindre en noir avec l'outil pinceau

• Désélectionner tout, puis sélectionner le calque du masque

• Utiliser un pinceau plus large pour peindre un dégradé autour de l'image

• Enregistrer l'image au format PNG

• Placer l'image dans Figma et la positionner

• Placer une autre image dans le carrousel et la décaler vers la droite

• Dupliquer le cadre, sélectionner les deux éléments et les déplacer vers la gauche

• Sélectionner la première image du carrousel, passer en mode prototype et ajouter une interaction de navigation au glisser avec un effet d'animation intelligente

• Répéter la même action pour l'autre image du carrousel en sens inverse

Création de masque et création de carrousel

Création d'un prototype avec Figma et HTML/CSS

• La création d'un prototype avec Figma et HTML/CSS peut commencer par l'association de deux images d'en-tête.

• Il est essentiel de faire correspondre toutes les couleurs de la seconde vue avec celles de la première.

• Grâce à l'auto-animation, la transition des couleurs entre les deux vues se fait automatiquement dans le prototype Figma.

• En utilisant l'outil plume, il est possible de tracer une forme vectorielle dans l'arrière-plan, puis de l'exporter en SVG pour l'intégrer dans le HTML.

• L'utilisation d'outils d'intelligence artificielle, comme ChatGPT, facilite le processus de création en générant rapidement du code HTML et CSS.

Création d'un prototype avec Figma et HTML/CSS

Création d'un carrousel interactif avec GreenSock Animation Platform

• Le processus de création du carrousel interactif avec la plateforme d'animation GreenSock commence par l'ajout du code HTML dans notre document HTML et le développement du CSS correspondant.

• Ensuite, le JavaScript est ajouté pour permettre la fonctionnalité interactive du carrousel.

• Il a été constaté qu'il manquait l'importation de la plateforme d'animation GreenSock, ce qui a été réglé en demandant à Chat GPT de fournir la balise de script nécessaire.

• Après l'ajout rapide de CSS pour styliser les éléments individuels du carrousel, il est apparu que la navigation se faisait automatiquement en haut, mais l'objectif était de la rendre interactive.

• Une recherche a été effectuée pour savoir comment permettre à l'utilisateur de faire glisser entre les différents éléments du carrousel

• La méthode proposée n'était pas exactement ce qui était recherché, car elle utilisait les événements tactiles au lieu des événements de pointage pour fonctionner à la fois sur bureau et mobile.

• En fin de compte, le code a été copié et collé dans notre fichier JavaScript, de sorte que le glissement à gauche ou à droite permet de naviguer entre les deux éléments.

• Ensuite, dans le HTML, les éléments du carrousel ont été remplacés par les images de héros, et des ajustements CSS ont été réalisés pour empêcher la sélection de l'image et adapter la mise en page.

Création d'un carrousel interactif avec GreenSock Animation Platform

Mise à jour des styles de page et ajout d'éléments de conception

• Nous commençons par ajouter une classe à notre balise body en fonction de la page sur laquelle nous nous trouvons et de l'élément du carrousel actuellement affiché.

• Cela nous permettra de mettre à jour tous les styles de la page en fonction de cette classe spécifique.

• Ensuite, nous copions le dégradé CSS depuis Figma pour les arrière-plans et nous le collons dans les classes pour chaque page séparée, de sorte qu'il change lors des transitions entre les éléments du carrousel.

• Nous ajoutons ensuite les éléments de cercle en les espaçant uniformément à l'aide de flexbox, puis nous copions et collons chaque dégradé depuis Figma pour le reste de la conception.

• En ajustant la mise en page CSS, en copiant les variables depuis Figma et en les intégrant dans le CSS, nous obtenons enfin quelque chose qui ressemble à ce que nous voulions obtenir.

• Le processus a été résumé ici, mais plus de détails sont disponibles dans le code source sur GitHub.

Mise à jour des styles de page et ajout d'éléments de conception

Conclusion:

En combinant habilement les langages HTML, CSS et JavaScript, il est possible de concevoir un carrousel interactif qui améliore significativement l'expérience utilisateur. Offrez une navigation fluide et attrayante sur votre site web dès aujourd'hui !