annexe sujet -topic206352 du forum

Défilement fluide par CSS, sans <marquee>

Annexe, en suite du sujet trucs et astuces

Où placer le code CSS concernant l'animation ?

Rappel : L'éditeur du thème-css est un outil externe intégré à Eklablog. De par son âge, ses limitations naturelles et ajoutées, tous les codes ne sont pas acceptés dans "ajouter du css".
Il faut donc parfois les placer ailleurs dans le code source html, entre des balises <style> et </style> (article, module, zone de script etc.)
C'est le cas pour ce type d'animation.

CSS complémentaire si ce qui défile (texte et/ou image) doit être positionné hors contenu

Pour positionner ce texte défilant hors contenu (ou fixe par rapport à l'écran), on peut mettre le paragraphe <p>...</p> dans un bloc <div id="positionxy"> ...</div>
Il suffira d'ajouter dans le style les propriétés pour positionner cet id . Par exemple:

#positionxy {
position: absolute; /* ou position: fixed; si on souhaite fixer sur l'écran */
left:80px; /*left pour positionner en référence au coté gauche (x) */
top:30px; /* top pour positionner en référence au haut de l'écran (y) */
width:250px; /* largeur visible du texte qui défile */
overflow: hidden; /* masque tout ce qui dépasse du bloc contenant */
border: 5px solid #465b77; /* facultatif ; bordure */
border-radius: 10px; /* facultatif ; rayon bordure aux coins */
}

Un exemple qui fait suite à une demande d'aide sur le forum

Cliquer ici pour afficher cet exemple

Compatibilité des navigateurs avec la règle @keyframes

(ajout 20/05/21)

Tous les navigateurs récents, normalement mis à jour, sont compatibles avec la règle @keyframes. (Firefox est compatible depuis 2012, les autres au cours de l'année 2015)

Aujourd'hui (18/05/21), le code de base que j'ai indiqué sur le forum, convient à des navigateurs dont la dernière version a jusqu'à 5 ans d'âge, voir un peu plus.

Les versions antérieures peuvent nécessiter de faire appel à des règles @keyframes préfixées. Cela nécessite de dupliquer la règle standard en lui ajoutant le préfixe requis ( -webkit- ou -moz- ou -o- ) et de la placer en amont du @keyframe standard.
Pour remplacer une balise marquee, c'est un souci de perfection qui augmente presque inutilement l'écriture du code.

Références:
Mozilla > https://s.42l.fr/MDN-keyframes Can I Use > https://s.42l.fr/caniuse-keyframes

Vitesse du défilement

(ajout 20/05/21)

La vitesse n'est pas définissable avec la propriété "animation". Elle est la résultante de la distance (en pixels) que doit faire l'élément qui se déplace, de la longueur (en pixels) de cet élément, et du temps (en seconde) paramétré dans la propriété animation.