< if tag display title = exercice />

Fun avec Snake

Jour 26, un peu de fun avec le jeu de nos enfances, le jeu qui nous a valu plusieurs mises en garde de nos profs de français. Ces profs qui ne comprenaient pas que quelques pixels pouvaient se transformer en passions où 20 ans plus tard, nous feraient le jour 26 de l’auto-challenge coder ce […]



Image hover effect link

(édité le Lundi 21 mars 2021) Jour 25, j’aime beaucoup les sites où au survol des liens on peut apercevoir les projets qui vont suivre. J’expérimente sur cette page l’idée d’images qui se voient à l’hover du lien et qui suivent le curseur de notre souris (fonction follow mousse avec javascript). L’effet d’image qui suit […]



Links hover interaction

Jour 24, transformer nos liens, les changer au passage de notre souris, changer la typo, la couleur, la taille est facile avec le css, mais lui donner un effet de flippe. Voici un menu qui « flippe » de font au passage de votre souris :quentinrenaux.com/xp/1day1code/D24-link-hover-interaction/



Scroll experiment

Jour 23, j’ai voulu jouer avec le scroll de nos navigateurs, Pourquoi ne pas scroller vers le haut plutôt que le bas? et finalement ne scrolle-on pas en rond tout au long de notre aventure internet. Voici une representation de cette idée autour du decoupage de 4 de mes têtes, histoire de ne pas être […]



Deformation avec OGL

Jour 21 : Retour à Paris, klaxons et compagnie, reprise des bases. Pour le premier code j’ai voulu fouiller un nouveau framework dont je n’avais pas encore ouvert les portes OGL (pour experimenter des effects qui utilise la 3D), et comme tout bonnement la premiere fois on ne connait pas il faut regarder les autres: […]



Css only Masonry w/ flexbox

Jour 20, On va parler de Masonry, masonry pour le vulgariser c’est une library javascript qui à servi plein de sites comme Pinterest à mettre en place des « murs » de photos et d’images, un peu comme des briques. On avait absolument besoin de javascript pour permettre aux images de bien s’emboiter, et on pourrait encore […]



Having fun with your cursor

Jour 18, On peut changer notre cursor par rapport à la div et par rapport à l’action quelle représente, mais peut on ajouter une animation CSS qui fait defiler presque tous les cursor disponible en quelques secondes ? Et si on fait ca uniquement en CSS, on peut rajouter une paire d’yeux qui suit le […]



Curseur magnétique sur « button ».

Jour 19, Je continue sur les follow cursor en javascript et css. Aujourd’hui dans cette page: on peut trouver un peu de javascript et de css pour le follow cursor, cette fameuse technique ou une forme, un element, suit le cursor et se repositionne dans la page grace au javascript. (voir un article sur le […]



Cursor follow javascript

Jour 17, je voulais faire un petit jeu avec le cursor de nos souris associé à une animation simple. Aujourd’hui on joue donc avec notre cursor, ce qui s’appelle le cursor follow sur le web, on ajoute un cercle (ou une forme) qui suit partout notre souris avec une mini latence, ca se fait avec […]



Menu animé en SVG

Jour 16, encore du SVG ? oui ! mais en fouillant du coté de la balise <text> du SVG (qui nous sert à afficher du texte) et après avoir bien compris <viewBox> (qui nous donne notre espace de travail) sans oublier les valeurs x et y qui nous permet de le positionner au bon endroit. […]