Voici mon second projet dans ma série d’expérimentations sur l’interaction web (voir le précédent ici). Le but de cette série est de me familiariser avec les différents outils disponibles pour ajouter de l’interactivité à des sites Web. J’ai décidé de concevoir ces expérimentations autour du thème des lignes simplement pour donner une direction à mes projets. Pour cette expérimentation, j’ai travaillé à un effet pour les champs de saisie. Celui-ci a été inspiré par des tutoriels sur Codrops, plus particulièrement un sur les champs de saisie et celui sur les cases à cocher et bouton radio. Certaines idées ont également été inspirées par le « Float Label Pattern », proposé dans un premier temps par Matt D. Smith, et ces diverses implémentations (voir l’article ici). Pour les lignes, j’ai utilisé un SVG et j’ai animé leur largeur en en utilisant des transitions CSS lors du focus sur le champ ou lorsqu’il est rempli. J’ajoute une classe en utilisant Javascript lorsque le champ n’est pas vide, comme Peter Sorowka fait dans sa variante du « Float Label Pattern »(voir CodePen ici). Voici le résultat dans un GIF animé. Vous pouvez également l’essayer ici.
