WebL'Agence - Le meilleur de Codepen #3

Le triptyque HTML, CSS, Javascript n'a pas fini de nous étonner. Plus qu'un éditeur en ligne, Codepen, permet de partager, et de démontrer son savoir-faire dans le domaine du développement web. Il est le lieu à visiter pour apprendre, forker du code, ou tout simplement apprécier les démos proposées. En voici quelques unes qui méritent le détour.

Animated SVG Avatar

Cette démo par Darin anime une image SVG en interaction avec l'utilisateur. L'illustration, un Yeti, bouge les yeux en suivant le clic de l'utilisateur. Lors de la saisie du mot de passe, la bête se cache les yeux. Une animation particulièrement drôle qui redonne un coup de jeune à une opération que l'on fait plusieurs fois par jour : se logger.

See the Pen Animated SVG Avatar by Darin (@dsenneff) on CodePen.


Neural Drum Machine

Cette démo proposée par Tero Parviainen est une boite à rythmes dont les motifs sont générés par un réseau de neurones profond. La première colonne à gauche représente une vue simplifiée d'un clavier de piano. Chaque touche est associée à un son de percussion. Quatre curseurs en bas permettent de régler le nombre de mesures dans chaque motif, le tempo, le swing, et la température. Le swing permet de modifier aléatoirement la durée de certaines notes, donnant ainsi plus "d'humanité" à l'ensemble, alors que la température règle la largeur des motifs. Faites un pré-réglage, puis appuyer sur "générer", et c'est parti...

See the Pen Neural Drum Machine by Tero Parviainen (@teropa) on CodePen.


Vue Draggable/Throwable Directive

Un codepen proposé par Miles Manners qui met à disposition deux fonctions javascript pour donner une dynamique intéressante aux objets déplaçable à l'écran. La vue "Throwable" (jetable) donne un mouvement franc à l'objet, comme un jet de fléchette. Alors qu'avec la méthode "Draggable", le rectangle finit sa course dans un mouvement amorti, comme un slide en roller skate...mais en plus lent ! Une belle ouverture ici pour la création de jeu d'adresse. Un code à forker et à multiplier absolument !

See the Pen Vue Draggable/Throwable Directive by Miles Manners (@milesmanners) on CodePen.


Dynamic Play Button

Un codepen par Sawyer Schumacher qui anime le bouton play au rythme de la musique. Le code n'utilise que les fonctions de base de javascript pour l'accès au canvas HTML5, et pour jouer un fichier audio mp3. Quelques calculs de géométrie classique sur les cercles, et la magie opère tout simplement. Un code très clair, et concis pour un effet étonnant.

See the Pen Dynamic Play Button by Sawyer Schumacher (@Sschumac2) on CodePen.


CSS Puns - Moses Sea

Un petit codepen par Katarzyna Marcinkiewicz qui utilise la plateforme d'animation GreenSock, Tweenmax. Le design est parfaitement responsive, le code concis. On ne relève pas toute la démarche de l'auteur dans cette petite démo. Pour cela, il faut se rendre sur le site de l'auteur CSS-Puns. Comme le nom l'indique, le site mêle animation en CSS, et jeux de mots sur le code. A la croisée, de l'art, de l'humour et des jeux d'esprit, chaque page mérite un coup d'oeil attentif à l'animation comme au code ! 

See the Pen CSS Puns - Moses Sea by Katarzyna Marcinkiewicz (@KazikM) on CodePen.



Voilà un petit tour d'horizon des possibilités offertes lorsqu'on a une bonne compréhension des formats du web, ainsi qu'une bonne dextérité à coder en HTML, Javascript, et CSS. L'outil codepen est très précieux dans une démarche en "test and try". La coloration syntaxique, la visualisation des trois fenêtre de codage, et l'aperçu en temps réel en font un outil très efficace. Le "drag and drop" de documents de toutes natures (json, svg, cvs ...) est d'une souplesse incontestable. Les possibilités de forker le code et de le partager, en font un puissant réseau social pour les développeurs professionnels, et en devenir. Pour ceux qui ne sont pas encore convaincus direction codepen pour s'inscrire.

N’hésitez pas à nous contacter et à consulter le deuxième article du Meilleur de Codepen !