Compagnon de code
CSS : l'essentiel, avec style !
Leçons :
Découverte & Sélecteurs
18:11
Styliser les textes
18:47
Comprendre les couleurs
14:11
Les backgrounds Color
10:49
Les modèles de boîtes
25:10
Notion de Clamp, le min et le max
09:12
Arrondis et Hover
14:57
Les Display
09:21
Invisibilité & Morale
08:57
Transformer des éléments ?
15:29
Les Positions
24:18
Positions & Précautions
08:11
MEP : Les positions
22:37
Les bases de Flexbox
36:54
MEP : un dé en flexbox
27:06
MEP : des cartes flexibles
19:08
Les animations en CSS
21:03
MEP : un système solaire animé
27:00
MEP : Un texte qui défile ?
09:12
MEP : un loader... des points sauteurs !
07:38
Sélectionner un enfant
07:04
Les variables CSS
15:42
Responsivité et Media Queries
19:36
Enoncé Exercice Twitter
05:15
Un clone de Twitter
54:11
Un site complet et Responsive en HTML / CSS
02:12:46
Notice
=> leçons
=> express
=> exercices
=> projets
Leçons :
Découverte & Sélecteurs
18:11
Styliser les textes
18:47
Comprendre les couleurs
14:11
Les backgrounds Color
10:49
Les modèles de boîtes
25:10
Notion de Clamp, le min et le max
09:12
Arrondis et Hover
14:57
Les Display
09:21
Invisibilité & Morale
08:57
Transformer des éléments ?
15:29
Les Positions
24:18
Positions & Précautions
08:11
MEP : Les positions
22:37
Les bases de Flexbox
36:54
MEP : un dé en flexbox
27:06
MEP : des cartes flexibles
19:08
Les animations en CSS
21:03
MEP : un système solaire animé
27:00
MEP : Un texte qui défile ?
09:12
MEP : un loader... des points sauteurs !
07:38
Sélectionner un enfant
07:04
Les variables CSS
15:42
Responsivité et Media Queries
19:36
Enoncé Exercice Twitter
05:15
Un clone de Twitter
54:11
Un site complet et Responsive en HTML / CSS
02:12:46
Notice
=> leçons
=> express
=> exercices
=> projets
Faire défiler un texte avec CSS.
Des noms qui défilent verticalement ? Facile !
Regardons tout ça ensemble.
Le code au besoin : défile vers mon code 😉
Je te propose ma solution :
🛠️ Explication rapide
L’idée est simple :
✅ Une liste de noms qui défile automatiquement
✅ Une animation CSS @keyframes pour simuler le mouvement
✅ Un calcul précis du temps d'affichage et du décalage
📌 Principe de l’animation
🔹 Chaque élément reste statique 10% du temps
🔹 Il glisse vers le suivant en 2.5% du temps
🔹 On boucle sur tous les éléments pour créer un effet infini
💡 Astuce : Si on change la police, toutes les valeurs doivent être recalculées !
Une solution plus avancée serait d’utiliser une variable CSS... mais ça, on verra ça bientôt ! 😉
🚀 À toi de jouer !
Teste, ajuste les timings et personnalise les styles !
Écrit en 03/25 par Christophe C.
Mis à jour en 03/25