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.
Le HTML
Mise à jour du statut
Comme vous pouvez le voir sur l'image ci-dessous, toutes nos étiquettes fonctionnent maintenant et ont l'air parfait. Notez qu'ils sont tous placés en haut par défaut, gardez cela à l'esprit lorsque nous avançons et les déplaçons.
Positionner chaque étiquette
De là, nous avons beaucoup de style à faire. Vraiment, nous avons un tout petit style à faire, mais nous devons le faire dix fois car chaque étiquette est unique. Pour chaque étiquette, nous devons positionner l'élément de paragraphe en dehors des limites de l'image, puis le ramener en survol.
Pour commencer, nous voulons une étiquette qui commencera juste au-dessus d'une image qui volera vers le bas en survol et se placera au sommet. Pour ce faire, nous définissons la valeur maximale sur -50%, qui passe ensuite à 0% en survol. De même, pour le même effet depuis le bas, nous commençons avec une valeur inférieure de -50% et nous la changeons en 0%.
Ma méthode ici est très spécifique alors prenez note. La partie la plus délicate de toute cette idée consiste à déterminer comment le faire fonctionner sur une large gamme de tailles d’images. Nous ne voulons pas que le développeur doive entrer manuellement une taille à chaque fois, cela devrait simplement fonctionner lorsque quelqu'un claque sur les classes requises.
En utilisant les propriétés haut et bas comme nous le sommes, nous nous assurons que rien n'est spécifique à la taille de l'image. La valeur de 0% sur la propriété du bas sera toujours Poussez notre étiquette vers le bas de l’image à laquelle nous l’appliquons, quelle que soit sa distance.
Ensuite, nous devons créer un style pour nos étiquettes latérales. Nous pouvons basculer en haut à gauche, en haut à droite, en bas à gauche et en bas à droite. Voici les valeurs pour ceux-ci. La méthode est simple et ressemble aux deux méthodes que nous venons de décrire. À chaque fois, nous positionnons la position de repos juste à côté, puis nous la remettons en vue avec le survol. Pour celles-ci, les propriétés left et right entrent en jeu en plus des propriétés top et bottom.
Pour finir, nous devons coder nos étiquettes centrées. Ce sont les plus difficiles à comprendre. En vol stationnaire, vous souhaitez les placer vers le bas ou le haut, moins de la moitié de la hauteur de l'étiquette. Ainsi, lorsque nous voulons glisser du haut vers le haut, nous fixons la valeur supérieure à 50% et appliquons une marge négative de 20px (la moitié de la hauteur de nos étiquettes). Malheureusement, cela suppose une seule ligne de texte et la taille de police que nous avons configurée. Si l'un ou l'autre change, la hauteur sera différente et l'élément ne sera pas centré. Le seul moyen que je connaisse est d’utiliser une sorte de affichage: table installer.
Facultatif: aller plus loin
Maintenant, si vous êtes fous de répétition, vous pouvez aller encore plus loin en vous assurant que votre code est aussi bref que possible. Nous avons séparé chaque étiquette ci-dessus pour des raisons de lisibilité, mais le résultat est une multitude de valeurs répétées. Nous pourrions combiner manuellement les sélecteurs ou utiliser Sass @extend pour arriver à un résultat beaucoup plus concis. Bien entendu, le compromis est que vous répétez vos sélecteurs, car certains apparaissent à plusieurs endroits.
Voyez-le en action
Nous avons tous fini! Assurez-vous de regarder la démo en direct ci-dessous et survolez chaque image pour voir les différents effets.
Démo: Cliquez ici pour lancer.
Conclusion
Ce projet nous a obligés à beaucoup de bonnes pensées. Nous avons dû examiner à plusieurs reprises comment garder notre code bref et sans répétition. Nous avons également constamment demandé ce qui était préférable étant donné que nous souhaitions que les autres utilisateurs puissent télécharger et modifier notre code avec très peu de problèmes. Parfois, lorsque nous avons trouvé un moyen de rendre notre code plus concis, cela se faisait au prix de lisibilité et de facilité d’utilisation, ce qui n’est pas la meilleure méthode pour un téléchargement gratuit.
N'hésitez pas à saisir ce code et à l'utiliser comme bon vous semble. Surveillez également le téléchargement dans les prochaines semaines sur PixelsDaily.