├── 1.Starter-files ├── index.html └── style.css ├── 2.Finished-files ├── index.html └── style.css └── README.md /1.Starter-files/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Slider 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /1.Starter-files/style.css: -------------------------------------------------------------------------------- 1 | *, ::before, ::after { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | body { 8 | background: #111; 9 | font-family: Arial, Helvetica, sans-serif; 10 | } 11 | -------------------------------------------------------------------------------- /2.Finished-files/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Slider 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |

Texte template 1

16 |

Texte template 2

17 |

Texte template 3

18 |

Texte template 4

19 |

Texte template 1

20 |
21 |
22 | 23 | 24 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /2.Finished-files/style.css: -------------------------------------------------------------------------------- 1 | *, ::before, ::after { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | body { 8 | background: #111; 9 | font-family: Arial, Helvetica, sans-serif; 10 | } 11 | 12 | .slider-1 { 13 | max-width: 600px; 14 | margin: 100px auto; 15 | overflow: hidden; 16 | border: 1px solid #f1f1f1; 17 | 18 | } 19 | .slider-1 .slider { 20 | animation: slider-1 12s infinite ease-in-out; 21 | display: flex; 22 | 23 | /* Si on veut faire glisser vers la droite */ 24 | /* Il faut aussi changer l'animation(transform) en valeurs positives */ 25 | /* flex-direction: row-reverse; */ 26 | } 27 | .slider-1 p { 28 | background: #000; 29 | flex-shrink: 0; 30 | padding: 72px 0; 31 | width: 100%; 32 | text-align: center; 33 | font-size: 45px; 34 | color: #f1f1f1; 35 | } 36 | 37 | 38 | /* 39 | 5% par transition, nombre choisi arbitrairement. 40 | 41 | reste divisé par nb de pauses 42 | 80(%) / 4 = 20(%) par pause 43 | */ 44 | 45 | @keyframes slider-1 { 46 | 0%, 47 | 20% { 48 | transform: translateX(0); 49 | } 50 | 25%, 51 | 45% { 52 | transform: translateX(-100%); 53 | } 54 | 50%, 55 | 70% { 56 | transform: translateX(-200%); 57 | } 58 | 75%, 59 | 95% { 60 | transform: translateX(-300%); 61 | } 62 | 100% { 63 | transform: translateX(-400%); 64 | } 65 | } 66 | 67 | /* Verticale */ 68 | 69 | .slider-2 { 70 | max-width: 600px; 71 | height: 200px; 72 | margin: 100px auto; 73 | overflow: hidden; 74 | border: 1px solid #f1f1f1; 75 | } 76 | .slider-2 .slider { 77 | height: 100%; 78 | animation: slider-2 12s infinite ease-in-out; 79 | 80 | /* Pour inverser l'animation */ 81 | /* display: flex; 82 | flex-direction: column-reverse; */ 83 | } 84 | .slider-2 p { 85 | flex-shrink: 0; 86 | padding: 72px 0; 87 | width: 100%; 88 | text-align: center; 89 | font-size: 45px; 90 | color: #f1f1f1; 91 | } 92 | @keyframes slider-2 { 93 | 0%, 94 | 20% { 95 | transform: translateY(0); 96 | } 97 | 25%, 98 | 45% { 99 | transform: translateY(-100%); 100 | } 101 | 50%, 102 | 70% { 103 | transform: translateY(-200%); 104 | } 105 | 75%, 106 | 95% { 107 | transform: translateY(-300%); 108 | } 109 | 100% { 110 | transform: translateY(-400%); 111 | } 112 | } 113 | 114 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## CSS Slider 2 | 3 | Code source de la vidéo youtube : [Lien vers la vidéo](https://www.youtube.com/watch?v=4kE_K7fzsqY) 4 | 5 | 🚀 1 **Cours gratuit** en [t'inscrivant à la newsletter.](https://www.le-designer-du-web.com/news)
6 | 🔥  Apprends à **coder** grâce à [L'École du Web.](https://www.ecole-du-web.net) 7 | 8 | 9 | --------------------------------------------------------------------------------