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.

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.