Illustration de la semaine au poil #33

Une semaine au poil – #33

Je vous ai trouvé cette semaine plusieurs choses intéressantes (non, rien ne concerne Pokémon Go 🙂 ) : une scènette en SVG animée, un beau site avec de belles transitions, une bibliothèque CSS pour un système de notation accessible et animé,  des conseils pour réaliser des emails responsive et pour finir, une librairie pour animer des éléments au scroll.

Une scènette en SVG animée avec du JavaScript

Je suis toujours surpris de ce qu’on peut faire avec un peu de JavaScript et de SVG. Ici son auteur s’est amusé à réaliser une expérimentation en trompe l’oeil (lorsque l’on clique sur la route, elle pivote).

See the Pen Road Block by Chris Gannon (@chrisgannon) on CodePen.0

Beau site : Ortiz Leon

Ortiz Leon est un site d’un cabinet d’architecture qui met en avant ses différents projets. Ce site est une réussite, il dispose de transitions fluides et super efficaces et cela sans en faire trop. Son web design est également  maîtrisé.

Site internet Ortiz Leon

A voir ici : ortizleon.es

Starability.css : un système de notation accessible

L’accessibilité est plus que nécessaire aujourd’hui. C’est dans ce but que l’auteur de cette bibliothèque CSS a conçu un système de notation avec étoiles lisible par un lecteur d’écran. En plus de ça, il y a 5 animations possibles, à voir ici dans la démo.

Système de notation accessible

En savoir plus : github.com/LunarLogic/starability

Guide pour créer des emails responsive

Voilà un article bien écrit et bien complet sur la façon de créer un email responsive. Pas mal de conseils avisés pour réussir à afficher son email correctement sur la plupart des clients mails.

Conseils pour réaliser des email responsive

L’article : medium.com/cm-engineering/coding-mobile-first-emails

AOS : animer des éléments au scroll

Petite bibliothèque JS pour de belles animations qui s’activent lorsque l’on fait défiler une page web. Assez simple à mettre en place et beaucoup de possibilités d’animation.

AOS : animations au scroll

En savoir plus : michalsnik.github.io/aos/

 

Si vous en voulez plus, n’hésitez pas à me suivre sur Facebook et sur Twitter.

Laisser un commentaire :

Votre adresse email ne sera pas publiée.