Ici, il s’agit de faire défiler le texte situé entre la balise ouvrante .Par défaut, si vous ne renseignez aucun attribut, le texte défile de droite à gauche, disparaissant une fois arrivé en bout de ligne pour réapparaîtr… Pour gérer le continu, on va utiliser l’attribut Et on utilisera dans le css la pseudo classe :after pour le placer à l’endroit voulu.Avec la petite astuce pour les designs responsive, lorsque la taille de votre texte est trop grande pour la taille de l’écran :Pour choisir le max-width: 860px (l1), j’ai simplement regardé la taille que la fenêtre avait au moment ou le 700px prenait 100% de la place et je le remplace par 100 (l8). J’augmente aussi un peu la vitesse de l’animation en baissant la durée pour éviter de s’endormir trop dessus. Rappel : c’est cette indication codée, écrite entre < > qui vous permettra de mettre en forme votre texte, de lui faire adopter tel ou tel comportement.
Mais comment faire si, pour une raison ou une autre on ne veut pas ou ne peut pas utiliser javascript ?Depuis css3, la solution la plus propre – Si on part du principe que ceux qui utilisent encore des navigateurs de la préhistoire n’ont pas à être pris en compte – est d’utiliser la propriété animation pour faire son texte défilant en css.On commence par un conteneur parent auquel il faut ajouter une classe, par exemple .defileParent. Lorsque le texte disparait sur le côté gauche de la fenêtre, il réapparait sur le côté droit. Bilan, l’animation est parfaite au dessus d’un écran à 860px et un peu saccadée au niveau de la boucle mais relativement visionnable en dessous. Faire défiler un texte à la manière de la balise Avec un texte plus long que la largeur de la fenêtre de défilement.Avec un texte moins long que la largeur de la fenêtre de défilement.La structure HTML mise en Åuvre est constituée de deux blocs, un bloc conteneur et un bloc défilant.Le bloc défilant doit être un modèle de boîte en ligne n'autorisant pas le renvoi à la ligne et être placé à droite du conteneur.L'animation proprement dite est définie en utilisant la propriété Les valeurs exprimées en pourcentage sont relatives aux dimensions de l'élément auquel elles s'appliquent et non au parent comme cela pourrait être le cas pour la propriété Les sources issues de cette page sont libres de droits et vous pouvez les utiliser à votre convenance et à vos risques et périls ;).Texte défilant plus long que la fenêtre de défilement Faire défiler un texte à la manière de la balise
Cet article va vous apprendre à en réaliser un en utilisant seulement du CSS. Le plus simple pour faire un texte qui défile, c’est d’utiliser la balise
A force de regarder le code, je ne vois pas où se situe le problème.
La propriété text-decoration permet de faire apparaitre une ligne en dessous, au dessus, ou à travers de votre texte. Pour faire défiler un texte ou bien une (des) image(s), les balises seront diférentes selon le sens où vous voulez les faire défiler: Pour un défilement de droite à gauche: Les balises pour un défilement de droite à gauche sont Ce qui vous donne pour un texte: