28182 sujets

CSS et mise en forme, CSS3

[Résolu] Bouton "Back to top" animé en CSS

Pages :
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.
Administrateur
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.... Smiley ohwell
Administrateur
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.... Smiley ohwell

Cela reste du HTML et CSS classiques non ? (éventuellement du JS selon les choix)
Modérateur
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 Smiley fache
Modifié par Bongota (04 Dec 2024 - 09:39)
Administrateur
Bongota a écrit :
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.

Je suis assez d'accord avec toi : l'intérêt ici de CSS est négligeable par rapport à JS en effet (même si on doit bien pouvoir le faire en 5 lignes de CSS aussi avec les propriétés raccourcies, mais ce n'est pas un concours Smiley cligne )

Bongota a écrit :
Le html pour le bouton, c’est une ligne???:
&lt;a class="button-top" href="#" role="button" title="Retour haut de page"&gt;&amp;#8593;&lt;/a&gt;

Oui. Attention quand même à ne pas appliquer un role=button car dans ce cas précis ce n'en est clairement pas un. C'est une ancre dans le sens premier du terme, donc littéralement un élément `<a>` et non un `<button>`.

Bongota a écrit :
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???

Ce n'est pas le nombre de lignes ou d'octets qui impacte la performance mais les méthodes JS employées ou les propriétés CSS utilisées. Mais là en l'occurence, dans les deux cas ce sera négligeable.
Modérateur
Bonjour,
Bongota a écrit :

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.

Certes, ce n'est pas beaucoup, 5 lignes de js. Mais c'est une question de philosophie générale. À force de rajouter quelques lignes de js par-ci par-là, on finit par avoir plein de lignes de js pour la présentation qui ont 2 inconvénients concernant les performances : d'une part il faut charger les scripts et comme rare sont ceux qui font l'effort de tout mettre dans un seul fichier js, on se retrouve avec une multitude de fichiers js à télécharger (même s'ils sont petits, ça coûte beaucoup), et d'autre part, quand on utilise le js pour de la présentation, ça a tendance à modifier la mise en page "tardivement" lors du chargement initiale de la page ce qui conduit à une pénalité de la part des moteurs de recherche (voir par exemple la notion de Cumulative Layout Shift).

Pour ma part, je lutte en permanence pour mettre le moins possible de js pour la présentation (idéalement, il faut arriver à 0 ligne).

Note : lorsqu'il faut gérer les actions de l'utilisateur sans recharger la page, c'est différent : le js est alors justifié.

Amicalement,
Bien compris.
Avant que je commence à apprendre le JS, je me faisais un point d'honneur à tout faire sans. Je recherchais à tout prix du css qui pouvait remplir la tâche.
Je me suis aperçu que je n'étais pas que soucieux de performances, que je n'étais d'ailleurs pas capable de mesurer. J'étais plutôt dans une sorte d'entêtement à ne pas utiliser JS Smiley decu
Et j'ai commencé à installer mes premiers scripts, puis les seconds. Franchement, je pense que je m'en suis bien sorti, je continue à privilégier le css quand c'est possible. Mais ça ne l'est pas toujours.
Et effectivement, je rencontre des sites, et pas des moindres, où la page html ressemble à un script géant. Il faut descendre bas sur la page avant de trouver une div. Je ne comprends pas ce genre de développement.
Bonjour à tous,

Je suis déjà impressionner par vos retours pros, parfois au-dessus de mes comptétences mais je tente de suivre Smiley cligne

Et je viens de retrouver un des thèmes (ancien) qui utilise exactement ce que je souhaite aujourd'hui, je pense que ce sera mille fois plus parlant.
https://arnold.seatheme.net/portfolio/home7/
C'est donc bien cette partie qui m'intéresse : wetransfer https://we.tl/t-ASmvM85H8H

...et probable effectivement que cet effet ne puisse être rendu qu'en JS.

Pour la partie Wordpress, je n'utilise pas du tout le thème ci-dessus (beaucoup trop limité) qui intègre déjà un back to top mais sans possibilité de remplacer sa forme depuis son admin (page exemple) : https://www.citedusilence.fr/

Il faudrait donc :
- remplacer tout le code du thème et le bouton back to top par le nouveau
OU
- exploiter le code back to top déjà présent dans le thème et ne remplacer que le bouton...

J'espère que ce sera plus clair, et pas trop complexe, avec ses nouveaux éléments.
Modérateur
Bonjour,

goudurisc a écrit :
Et je viens de retrouver un des thèmes (ancien) qui utilise exactement ce que je souhaite aujourd'hui, je pense que ce sera mille fois plus parlant.
https://arnold.seatheme.net/portfolio/home7/

OK

goudurisc a écrit :
Pour la partie Wordpress, je n'utilise pas du tout le thème ci-dessus (beaucoup trop limité) qui intègre déjà un back to top mais sans possibilité de remplacer sa forme depuis son admin (page exemple) : https://www.citedusilence.fr/

C'est https://www.citedusilence.fr/ qu'il faut modifier pour que le bouton to-top soit comme dans https://arnold.seatheme.net/portfolio/home7/ ?

Amicalement,
Administrateur
goudurisc a écrit :
Oui tout à fait, si on résume l'objectif, c'est bien de :

Remplacer le bouton
https://www.citedusilence.fr/

...par celui de
https://arnold.seatheme.net/portfolio/home7/

OK alors je ne veux pas faire mon rabat-joie mais...

1. Les développeurs de seatheme ont certainement choisi le pire élément HTML qui doit (`<div>`) pour faire ce job. On sent que l'accessibilité et la sémantique ont encore du mal à faire partie du job Smiley ohwell
2. En terme d'UX, ils ont fait des tests avec des vrais utilisateurs ? Combien sont-ils à deviner que ce trait horizontal à peine perceptible est en fait un élément qu'il faut survoler pour obtenir un scroll to top ? (Sans le savoir, je ne suis même pas sûr que j'aurais compris moi même)

Sinon pour la réalisation, tu peux utiliser l'inspecteur d'élément pour constater que l'élément `div` dispose de 2 pseudo-éléments (::before et::after) l'un à côté de l'autre et qui se tournent au survol pour dessiner la flèche.

EDIT : ah je n'avais pas compris que "seatheme" était aussi un thème WP. Bref, je ne change pas d'avis concernant l'UX de ce scroll-to-top.
Modifié par Raphael (04 Dec 2024 - 15:43)
Alors, je ne suis pas en mesure d'apprécier la pertinence de leur code à ce niveau mais je te fais confiance mais bien noter que ce n'est pas ce thème que je souhaite utiliser, il présentent d'autres défauts qui s'ajoutent à celui-ci, et c'est bien celui de "cité du silence".

Concernant l'UX de leur bouton, si je suis tout à fait d'accord avec ta remarque, je souhaite utiliser ce même bouton de manière plus visible (plus gros, au centre, sur un bandeau dédié...) et j'accepte le fait qu'il ne soit pas immédiatement compris et mon besoin reste donc uniquement technique.
Modérateur
Bonjour,

Est-ce que tu sais comment mettre du css additionnel via ton interface d'administration de wordpress ?

Si oui, tu mets dans ton css additionnel le code suivant :
#to-top>i:first-of-type
{
	color:#0000;
	background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path fill="none" stroke="white" d="M2 6H10"/></svg>');
}
#to-top>i:last-of-type
{
	color:#0000;
	background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path fill="none" stroke="white" d="M2 8L6 4L10 8"/></svg>');
}


Si non, cherche une page qui t'explique comment ajouter du css additionnel dans wordpress (y en a plein sur le web). Ce n'est vraiment pas très dur.

EDIT: et après, tu reviens dire si ça te convient ou pas, ou bien s'il faut aller plus loin.

Amicalement,
Modifié par parsimonhi (04 Dec 2024 - 16:11)
Modérateur
Bonjour
goudurisc a écrit :
Concernant l'UX de leur bouton, si je suis tout à fait d'accord avec ta remarque, je souhaite utiliser ce même bouton de manière plus visible (plus gros, au centre, sur un bandeau dédié...) et j'accepte le fait qu'il ne soit pas immédiatement compris et mon besoin reste donc uniquement technique.

L'implémentation technique dépend complètement du thème Wordpress utilisé. Si tu choisis un autre thème, il faudra très probablement un code css complètement différent pour faire le besoin.

Amicalement,
Alors, j'ai laissé entendre que j'étais nul mais pas au point de ne pas ajouter du CSS dans ma feuille de style de WP Smiley lol

Ce qui est fait, si je suis déjà impressionné par ce premier changement, c'est vraiment l'effet identique à celui d'Arnold soit une animation, un peu "morphing" du tiret plat vers une flèche qui monte.
Actuellement, on utilise encore une substitution d'image dont le point de départ a été remplacé par un tiret.

Et au final, il n'y aura donc aucun cartouche couleur, le bouton sera au centre et sur un grand bandeau légèrement grisé soit :
link : https://snipboard.io/Z9acxD.jpg
hover : https://snipboard.io/qkTJEZ.jpg
Modérateur
Bonjour,

En supposant que le bouton est en fait un lien <a>, est-ce que tu sais supprimer et rajouter du code html à l'intérieur de cette balise via Wordpress ? (le code css "clé en main" dépend pas mal du code html du bouton).

Amicalement,
Il me semble que l'édition de la partie HTML dans WP se limite au code de l'en tête et du pied de page.

Bien entendu, on peut aussi utiliser une extension qui permettent d'ajouter n'importe quel code souhaité.

Mais ce code se trouve dans le theme et comme celui-ci est mise à jour régulièrement, pas question d'intervenir à ce niveau.

Après, la mécanique de ce bouton semble gérée en php dans le thème avec l'icône favicon https://fontawesome.com/v4/icon/angle-up

Le code du fichier du thème "back-to-top.php"
<?php
/**
 * Back to top button
 *
 * @package Salient WordPress Theme
 * @subpackage Partials
 * @version 10.5
 */

// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

$nectar_options = get_nectar_theme_options();

if ( ! empty( $nectar_options['back-to-top'] ) && $nectar_options['back-to-top'] === '1' ) { ?>
	<a id="to-top" aria-label="<?php echo esc_html__('Back to top','salient'); ?>" href="#" class="<?php
	if ( ! empty( $nectar_options['back-to-top-mobile'] ) && $nectar_options['back-to-top-mobile'] === '1' ) {
		echo 'mobile-enabled';} else { echo 'mobile-disabled'; }
	?>"><i role="presentation" class="fa fa-angle-up"></i></a>
	<?php
}
Modérateur
Bonjour,

Ça donnerait un code du genre <a ...><i ...></i></a>.

Mais apparemment, dans le code final de https://www.citedusilence.fr/ il y a une deuxième balise <i> à l'intérieur du <a>. Ça doit être ajouté par du js. Et ça complique donc pas mal les choses. Ceci étant, ce n'est pas une surprise. Quand on regarde le code d'une page générée avec Wordpress, on a mal aux yeux pour au moins une semaine après ! Smiley lol Smiley lol Smiley lol

Le grand bandeau grisé qu'il y aura au final, c'est un conteneur de la balise <a> ? Ou bien c'est la balise <a> elle-même ? Et si c'est un conteneur, ça sera quoi ? Une <div> avec un id ?

Amicalement,
Prévenir un modérateur
Pages :
Répondre au sujet
Aller à