Aller au contenu

Deformation avec OGL

Image hover effect link par catégories

< if content: />

(é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 le curseur s’appelle un Traileffect ou Cursor Follow.
associé à Hover qui active le changement de curseur.

À voir ici : quentinrenaux.com/xp/1day1code/D25-title-image-effect

(Vous voulez voir tout le code, demandez le moi sur twitter)

Links hover interaction par catégories

< if content: />

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 par catégories

< if content: />

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 autocentré autour de ma personne sur mon propre site internet.

un scroll vers 4 directions différentes où l’on ne peut pas revenir en arrière, une sorte de carousel en pleine page.

Bienvenue ici, en voir plus pas là: quentinrenaux.com/xp/1day1code/D23-scrollsquare

Gradient with webGL par catégories

< if content: />

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 à webGL. On ira voir les 3D un peu plus pousser plus tard.

Voir ici : quentinrenaux.com/xp/1day1code/gradient-webgl/
Ça bougeeeee

Deformation avec OGL par catégories

< if content: />

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: j’ai suivis un tutorial des super Codrops.

Comment donner un effet de mouvement d’eau au toucher d’une image.

Voila le test : https://quentinrenaux.com/xp/1day1code/flowmap-effect/

blog

Content Creator

événements

Jewellery

Photogaphy

Portfolio

radio

special

timeline

web

web experiments

websites

Les archives par pages

Retour à l'accueil

© 2026 Quentin Renaux. Développé avec passion & trop de café.