Aujourd'hui, je travaille sur un autre téléchargement gratuit génial pour PixelsDaily. Ici, vous pourrez voir mes processus de pensée, mes objectifs et mon code, et plus tard, vous pourrez télécharger l'intégralité du projet pour l'utiliser dans votre propre travail.
En gros, notre objectif ici est de créer un effet simple afin que, lorsque l'utilisateur survole une image, une étiquette de texte masquée apparaisse. Ceci est bien entendu extrêmement facile à réaliser. Nous allons donc aller plus loin en proposant toute une gamme d’options au choix du développeur. Cela vous fournira quelques bonnes pratiques sur la manière de créer des effets flexibles pouvant être appliqués de différentes manières sans trop de répétition de code.
Aperçu
Si vous souhaitez voir le résultat avant de lire le code, consultez la démo ci-dessous et survolez chaque image pour voir en quoi c'est différent.
Démo: Cliquez ici pour lancer.
Le plan
Voici ce que nous voulons: une simple étiquette de texte avec un arrière-plan noir apparaît sur l'image lorsque l'utilisateur survole. Maintenant, comme il va être animé, j'ai proposé un total de dix variations différentes qui correspondent à peu près au même élément utilisé de différentes manières:
Nous avons deux paramètres principaux à définir ici. Le premier est l'endroit où l'étiquette va venir se poser (en haut, au centre ou en bas) et le second est son origine (en haut, à droite, en bas, à gauche). Ce que nous voudrons faire est de fournir aux développeurs une structure HTML de base, reproductible, lors de l’ajout d’une image, puis de leur donner des classes pouvant être appliquées pour tout contrôler sur le comportement de l’étiquette. Dans cet esprit, nous pouvons passer à la première étape.