Exemples d’effets sur les hover

Voici des idées pour des transitions / animations sur des hover d’images :

Déplacer un élément avec les transitions css3

Cas concret :

Sur un site, un menu fixed en haut de page avec des rubriques centrées. On souhaite que lorsqu’on scrolle, à partir d’un certain niveau, les catégories du menu passent à droite.

Admettons que les rubriques aient des styles associés :

On va définir une nouvelle classe pour les rubriques placées à droite avec les propriétés qui nous intéressent pour le déplacement :

En javascript maintenant, on va attribuer la nouvelle classe aux rubriques :

Et on retire la nouvelle classe, lorsqu’on remonte vers le haut.

Pour ajouter la transition et son bel effet, il faut ajouter la ligne suivante dans les propriétés du menu initial :

Ainsi, le passage entre les deux états se fera de manière fluide et élégante.