Des « exercices » ou « web experiments » que je mets en place pour tester de nouvelles méthodes ou implementations web. Du jeu web au animation css. Teste tout ça.
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 […]
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 […]
Jour 14, pour preparer les backgrounds de futur réalisations j’ai coder un fond simple mais en mouvement, avec « background linear gradient ». On trouve de très bon générateurs de background dégradé sur internet comme par exemple : mycolor.space ou cssgradient.io pour mes préférés, par contre, aucun ne permet de mettre en mouvement ces fonds. Un exemple […]
Jour 13 de mon autochallenge #1day1code, On parle encore de svg ? Oui mais avec une animation, et ce n’est pas de mince affaire! On va réaliser la lettre Q avec une stroke qui la remplie tout doucement. Pour ca tout commence sur illustrator où l’on va créer notre lettre à partir d’une font Baskerville, […]
