Nouvelle semaine, nouvelle sélection : un tutoriel pour créer un effet d’ondulation sur un bouton au clic, un deuxième tutoriel pour cette fois réaliser un portfolio avec des animations 3d, un effet de scroll à voir, des palettes de couleurs pour les daltoniens et le beau site Pottermore pour les fans d’Harry Potter.

Tutoriel : créer un effet d’ondulation en SVG lors d’un clic sur un bouton

C’est un effet que l’on voit souvent en material design, et en terme d’UX il informe l’utilisateur que le bouton a bien été cliqué.
Dans ce tutoriel, cet effet est créé à partir de SVG et à l’aide de la bibliothèque JavaScript Tweenmax.
Il propose 4 types d’animation qu’il est possible de voir ici en démo.

Le tutoriel : tympanus.net/codrops/2015/09/14/creating-material-design-ripple-effects-svg/

Tutoriel : créer un portfolio avec des animations 3d

Dans ce tutoriel, vous apprendrez à réaliser un joli effet de transition en 3d (voir la démo) avec du CSS et du JavaScript.

Le tutoriel : codyhouse.co/gem/3d-portfolio-template/

Un effet de scroll à voir absolument !

Pour le plaisir des yeux il ne faut pas manquer cette animation de scroll du site shtick.be (en version desktop uniquement).

A voir ici : shtick.be

Des palettes de couleurs pour les daltoniens

Marie Julien nous a sélectionné cette semaine 20 palettes de couleurs pour les daltoniens.

Pour la tester avec d’autres formes de daltonisme vous pouvez vous rendre ici : toptal.com/designers/colorfilter

Beau site : Pottermore, pour trouver son patronus

Les fans d’Harry Potter devraient apprécier cette expérience interactive mais les autres aussi, sans aucun doute ! Ce site est réalisé en WebGL avec three.js par la célèbre agence Active Theory, dont on reconnait ici leur savoir-faire.

A voir ici : my.pottermore.com/patronus

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