Au programme cette semaine, des grilles isométriques, une transition d’image très réussie, de l’inspiration avec un beau site et des expérimentations, les meilleures bibliothèques d’animation CSS et 5 techniques pour créer un sticky footer.
Des grilles isométriques et en 3D
Superbe travail sur ces grilles isométriques et en 3d. Plusieurs versions sont disponibles, la première est scrollable, les autres sont statiques. Les éléments sont cliquables avec chacun un effet hover différent. Comme toujours avec Codrops, le tout est téléchargeable ici.
Il faut tout de même préciser qu’il s’agit d’expérimentation, malheureusement sur certains navigateurs tout ne fonctionnera pas correctement.
A tester ici : http://tympanus.net/Development/IsometricGrids/
Un effet de transition d’images
Je suis en admiration devant cet effet particulièrement réussi ! Réalisé en JavaScript, mais plutôt complexe je dois dire.
See the Pen Displacementmap image transition by Felix Nielsen (@flexmotion) on CodePen.0
Beausite : portfolio de Yoan Chevojon
Voilà un site que j’ai particulièrement bien apprécié cette semaine. Les animations de transitions sont bien gérées, son webdesign mise sur la sobriété afin de mettre en avant les photos de qualité.
A voir ici : http://www.studiochevojon.com/
4 frameworks pour vos animations CSS
Il existe de nombreux frameworks différents pour mettre en place des animations CSS. Creative Bloq a fait une sélection de 4 d’entres-eux.
La sélection : http://www.creativebloq.com/css/4-top-css-animation-frameworks-51620511
5 techniques pour créer un sticky footer
Cet article détaille différentes techniques (margin, flexbox, grid…) pour avoir un footer fixé. Dans le principe si la page est plus grande que le navigateur, le footer restera tout de même à la fin de la page. Au contraire, si elle est plus petite, le footer restera collé en bas du navigateur.
L’article : https://css-tricks.com/couple-takes-sticky-footer/
Si vous en voulez plus, n’hésitez pas à me suivre sur Facebook et sur Twitter
