Bei der Programmierung einer Webseite will man hin und wieder den Fokus auf ein Element legen, dafür kann man entweder Farben, Formen oder so wählen oder halt auch mal einen coolen Effekt. Heute zeige ich euch wie ihr so einen coolen Text Wechseler Effekt erzielen könnt.
Also stellt euch vor ihr habt einen Text wie “Ich will heute xxx essen” und das xxx wird regelmässig ausgetauscht. Sowas bauen wir heute
Video
HTML
Zuerst definiere ich mit HTML den Text und welche Wörter ausgetauscht werden sollen.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div class="container"> Ich will heute <div id="flip"> <div> <div>Fleisch</div> </div> <div> <div>Gemüse</div> </div> <div> <div>Kinder</div> </div> </div> essen </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | .container { color: #999; text-transform: uppercase; font-size: 36px; font-weight: bold; padding-top: 200px; position: fixed; width: 100%; bottom: 45%; display: block; } #flip { height: 50px; overflow: hidden; } #flip>div>div { color: #fff; padding: 4px 12px; height: 45px; margin-bottom: 45px; display: inline-block; } #flip div div { background: #45c58a; } #flip div:first-child div { background: #4ec7f3; } #flip div:last-child div { background: #DC143C; } #flip div:first-child { animation: wechsel 5s linear infinite; } |
Hier noch die Keyframes Animation
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | @keyframes wechsel { 0% { margin-top: -270px; } 5% { margin-top: -180px; } 33% { margin-top: -180px; } 38% { margin-top: -90px; } 66% { margin-top: -90px; } 71% { margin-top: 0px; } 99.99% { margin-top: 0px; } 100% { margin-top: -270px; } } |
0 Kommentare