(é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 […]
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/
Jour 22: Je suis dans le web GL qui est une specification d’interface de programmation permettant d’implementer de la 3D dans des pages web. Sans grande prise de tête pour prendre le code en main, je regarde ce qui peut se passer avec des gradient en background animé dans notre canvas, le tout grace à […]
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: […]
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 […]
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 […]
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 […]
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 […]
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. […]
Jour 15, Ça fait quelques jours maintenant que je dig ce qu’on peut faire avec le svg associé à notre adoré css. Aujourd’hui j’ai donc animé mon Nom et prénom comme si je l’écrivais moi meme en SVG, responsive et avec un fond de couleur. Après quelques essais sur illustrator que je ne connaissais que […]