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, […]
Jour 12, j’ai reçu une maquette il y a quelques jours d’un projet de site dans le quel il y avait des textes incurvés. La premiere idée serait d’utilisé du javascript comme arctext.js le faisait. Pour se moderniser et jouer avec le svg et le css j’ai découvert que l’on pouvait faire suivre un texte […]
Jour 11, Je m’intéresse depuis un moment à la réalisation d’un slider en pure css et pour une cliente j’avais besoin de faire des transitions « fade in fade out » sur environ 5 slides de ses images. Ici J’utilise 5 détails d’une fresque de Derudder design Le slider est en autoplay Le code est inspiré de […]