Une semaine au poil – #22

Au programme de cette semaine : un modal accessible, un effet de distorsion en WebGL, une turntable super simple à utiliser, un progress circle en SVG et des bonnes pratiques pour gérer une pagination sur un site. Bonne lecture !

Modaal : modal accessible WCAG 2.0 Level AA

On voit souvent des plugins pour afficher des beaux modals mais ils sont très rarement accessibles. Modaal comble ce problème en proposant une bibliothèque JavaScript qui nous permet d’afficher des modals accessibles. Il rentre dans les critères WCAG 2.0 avec le Level AA (mais qu’est-ce donc le WCAG 2.0 ?).

Le lien : http://www.humaan.com/modaal/

Effet de distorsion dûe à la chaleur animé en WebGL

Je suis tombé sous le charme de cet effet super bien réalisé. Il en fait la démo sur une scène en plein désert ou encore une scène avec un wok.
Au niveau technique il utilise du WebGL et décompose l’image en plusieurs parties. Ce n’est pas très simple à mettre en place, mais le résultat en vaut le coup.

L’explication et le lien pour le télécharger : http://tympanus.net/codrops/2016/05/03/animated-heat-distortion-effects-webgl/

Turntable : slider 360° en JQuery

Cette bibliothèque JS va vous permettre de créer un slider 360° pour présenter vos produits super facilement. Pour cela, il suffit d’y intégrer votre liste de photos entre des balises <li>, 2 lignes de JavaScript et c’est parti !

La démo et son explication : http://polarnotion.github.io/turntable/

Tutorial : un progress circle en SVG

Voilà un tutorial assez simple pour réaliser un progress circle.

See the Pen SVG Progress Circle – Sass by Alex Pate (@alexpate) on CodePen.

Le tutorial : https://alexpate.uk/journal/pure-svg-progress-circles/

Des bonnes pratiques pour gérer la pagination d’un site

Un très bon article qui relate les différentes méthodes pour gérer la pagination. Il met en avant des pratiques à privilégier et d’autres au contraire à éviter.