Illustration de la semaine au poil #41

Une semaine au poil – #41

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.

Effet d'ondulation au clic sur un bouton

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.

Réaliser un portfolio avec une transition en 3d

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).

Effet de scroll du site Shtick.be

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.

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.

Pottermore : trouve quel est ton patronus

A voir ici : my.pottermore.com/patronus

 

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.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.