Quand je tombe sur des sites qui donnent une impression un peu « la classe » tout en paraissant d’un niveau technique atteignable, j’aime bien chercher comment il a été fait. Ca me permet de faire une veille dynamique, en condition réelle, en observant les outils qui sont concrètement utilisés et éprouvés.

Alors que je retombe ce soir dans mon vice (« Oh le joli site ! hop, ouverture de la console de mon navigateur, hop, trifouille dans le <head>…), je me dit que je ferais aussi bien de commencer une série de radiographie de sites.

Radiographie n°1 - Moments d’invention 2016

Le site en question : Moments d’invention 2016, un événement qui a l’air assez à la rentrée à Nancy.

Back

Pas grand chose à sortir sur le back. C’est du PHP, mais wappalizer n’arrive pas à m’en dire plus. Framework fait maison ?

Front

Là, c’est + intéressant. C’est ici surtout que réside l’effet whaou, et j’ai pu repérer deux ou trois trucs.

  • Menu principal qui repousse le reste de la page : merci à codrops, fournisseur officel d’effets wahou pour des générations de développeurs (lien vers la demo du menu),
  • Transition en douceur des pages : smoothState.js
  • animate.css, un grand classique pour l’animation d’éléments !
  • un helper pour gérer facilement les classes css en js : classie

Auteur

Pas réussi à trouver de crédits sur le site, si vous savez qui en est à l’origine, ça m’intéresse !

Source : Moment d’invention 2016