octobre 2020 | Quentin Renaux

Speed résumé video par catégories

< if content: />

Css only Masonry w/ flexbox par catégories

< if content: />

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 en avoir besoin aujourd’hui!

Mais alors si on veut le faire uniquement en CSS on peut ?
Et bien oui ! en se penchant sur la fonction Flexbox et ses colonnes (column).

Voici un Masonry composé uniquement de css avec mes photographies instagram et le tout posté pour la premiere fois sur Codepen (un site communautaire d’échange de code)

voir le résultat

Le résultat ici → codepen.io/quentindigital/full/KKzmXQd

Having fun with your cursor par catégories

< if content: />

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 cursor lorsque celui ci devient fou ?

OUI on peut faire tout ca! un curseur fou et une paire d’yeux sur la meme page.

Voici le résultat: quentinrenaux.com/xp/1day1code/fun-with-cursors
Evidement c’est à voir d’un ordinateur vu qu’il n’y a pas de curseur sur un mobile.

Curseur magnétique sur « button ». par catégories

< if content: />

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 sujet en anglais)

La partie importante du jour est que lorsque le cursor arrive sur un lien/button celui ci se transforme ou fait disparaitre la forme qui suivait le cursor pour donner un effet d’enlacement de notre bouton, le css n’est pas sur le bouton mais bien sur la souris ou curseur qui changent de design et se transforment.

Réalisation à voir ici : quentinrenaux.com/xp/1day1code/cursor-follow/

Cursor follow javascript par catégories

< if content: />

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 un peu de javascript et une animation sur le linear.

En plus de ca pour rendre la page belle, des que la souris arrive sur un lien celui ci grossi la forme du cursor par un grand cercle et inverse les couleurs. Je vous laisse aller voir.

(Animation sur le Hover donc à voir sur un ordinateur pour jouer avec le curseur de votre souris)

Voir la page ici : quentinrenaux.com/xp/1day1code/cursor-and-invert-color/

Menu animé en SVG par catégories

< if content: />

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.

Le but du jour est d’animé comme hier (lien vers l’article) et avant hier (lien vers l’article) du SVG mais cette fois en ce simplifiant la vie et en partant directement d’un texte.

On va donc mettre un hover avec une transition sur notre SVG qui animera notre stroke-dashoffset et notre fill comme ceci : transition: stroke-dashoffset .9s ease-out, fill 1s;

Ça nous donne un joli menu animé.

Voir le résultat ici : quentinrenaux.com/xp/1day1code/menu-svg-animation-path/