Bouton "Back to top" animé en CSS

Bonsoir,

Pour mon site Wordpress, je souhaite pouvoir créer ce bouton "simple" qui part d'un trait pour former une pointe en survol.

Est-ce possible uniquement en CSS ?

...et pour son intégration et sa mécanique (ex : qui s'affiche uniquement à partir d'un scroll de300px, faudra passer par un script je crois.

Hello,

Depuis l'arrivée des nouvelles animations liées au scroll, c'est entièrement faisable en CSS… mais Firefox ne les supporte pas encore.

Voici un exemple fonctionnel : https://codepen.io/alsacreations/pen/PoMGKJR

Dans cet exemple une alternative JS est proposée pour les navigateurs qui ne reconnaissent pas encore cette fonctionnalité.

Bonne journée !

EDIT : par contre pour la partie "former une pointe en survol", il s'agira de le faire via une autre transition sur un élément SVG, ça ne devrait pas poser trop de problème. Au pire, des SVG animés de ce genre existent déjà. (ici par exemple, en cherchant "arrow" : https://animatedicons.co/icons/minimalistic?type=free)
Modifié par Raphael (03 Dec 2024 - 09:25)

Merci beaucoup pour ce retour.

J'avais repéré la partie code pour la gestion du scroll comme https://tw-elements.com/docs/standard/components/scroll-back-to-top-button/

Sur animatedicons, je vois qu'ils proposent de télécharger le fichier lottie et je pourrais éventuellement créer mon animation de flèche sur After Effects et l'exporter pour un usage lottie.

La question porte sur la gestion des pseudo-classes, comment dissocier le hover, faudrait-il réaliser deux animation pour les deux status de mon bouton...

Et au final trouver comment intégrer le tout dans Wordpress....

goudurisc a écrit :
J'avais repéré la partie code pour la gestion du scroll comme https://tw-elements.com/docs/standard/components/scroll-back-to-top-button/

Alors pourquoi pas, mais du coup ce que tu présentes n'est pas en CSS pur, c'est du JS. C'est pas un souci hein, mais il me semble que c'était pas le besoin au départ.

goudurisc a écrit :
Sur animatedicons, je vois qu'ils proposent de télécharger le fichier lottie et je pourrais éventuellement créer mon animation de flèche sur After Effects et l'exporter pour un usage lottie.

Là aussi pourquoi pas, mais je trouve que c'est un peu usine à gaz de passer par Lottie pour une animation de SVG.

goudurisc a écrit :
La question porte sur la gestion des pseudo-classes, comment dissocier le hover, faudrait-il réaliser deux animation pour les deux status de mon bouton...

Pas sûr de comprendre la question, pour moi les événements sont très différents :
- tu as une animation lors du scroll de page
- tu as une transition lors du :hover du lien

goudurisc a écrit :
Et au final trouver comment intégrer le tout dans Wordpress....

Cela reste du HTML et CSS classiques non ? (éventuellement du JS selon les choix)

Bonjour,

Pas sûr moi aussi d'avoir compris la question.

1) Pour le déclenchement du scroll, et en attendant que la solution basée en particulier sur les propriétés css ainmation-timeline et animation-range proposée par Raphaël marche sur tous les principaux navigateurs (solution qui sera à terme la plus élégante et la moins risquée en terme d'intégration), voici une solution en css pur (donc sans js) : https://jsfiddle.net/parsimonhi/sbdk2agn/

Cet exemple est dérivé de la discussion https://forum.alsacreations.com/topic-18-90885-3-Nouvelle-version-de-ma-codebase-front.html, et reprend le html de la démo de Raphaël auquel j'ai ajouté une balise <nav> pour faire fonctionner la solution, et qui sert de conteneur à un lien-bouton (balise <a> stylée comme un bouton) qui permet de revenir en haut de la page quand on clique dessus, et qui s'affiche lorsqu'on a scrollé d'au moins 300px.

2) Le lien-bouton apparait initialement sous la forme d'un trait, et devient une flèche lorsque l'utilisateur fait un hover sur le trait (j'avoue que là, le cahier des charge était un peu une devinette). Pour faire ça, quelques lignes de css en utilisant :hover suffisent me semble-t-il.

3) Pour intégrer le code dans wordpress, il faut pouvoir ajouter dans le html la balise <nav> autour du lien-bouton et ajouter la classe to-top-container à cette balise <nav> et la classe to-top au lien-bouton (pour faire ça, ça dépend pas mal de la manière dont a été utilisé Wordpress pour construire le site). Le css, lui, est à ajouter dans une feuille de style personnalisée (ou "custom css") via l'interface d'administration de Wordpress.

Il faut bien entendu ne garder que le css permettant de faire fonctionner la solution, et l'adapter en fonction du style du lien-bouton qu'on veut obtenir.

Amicalement,

Bonjour,
pour une fois, je ne suis pas certain de l’avantage du pur css sur le JavaScript. Avec cinq lignes de JS, mon code fait le travail pour le bouton. L’avantage, c’est que le même code peut aussi faire apparaître des div ailleurs sur la page, toujours au scroll.
Le html pour le bouton, c’est une ligne???:

<a class="button-top" href="#" role="button" title="Retour haut de page">&#8593;</a>

Le css met le bouton en forme, l’opacité pour le faire apparaître et tout ce qui va avec.
Je n’ai par contre pas mesuré les pertes de performance avec JS, mais ça doit être très léger pour cinq lignes de JS. Non???
ps?: Têtu ce matin, cet éditeur de texte, impossible d’enlever les?? en trop
Modifié par Bongota (04 Dec 2024 - 09:39)