Text kommt und verschwindet |
So sieht´s aus |
HTML Knowhow
|
Quellcode |
<html> <head> <style type="text/css"> .my-text {font-size: 4em; font-weight: bold; text-align: center; font-family: sans-serif;} span {color: fuchsia; display: inline-block;} </style> </head> <body > <div class="my-text">HTML Knowhow</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script> <script> $(document).ready(function() { var myText = $('.my-text'), textArray; textArray = myText.text().split(""); myText.empty(); textArray.forEach(function (item, index) { myText.append('<span>'+ item +'</span>'); }); var textAnimationLoop = function() { setTimeout(function() { textArray.forEach(function (item, index) { myText.find('span').eq(index).css({'color': 'transparent', 'transition': '1.5s '+ 0.1 * index + 's'}); }); }, 200); setTimeout(function() { textArray.forEach(function (item, index) { myText.find('span').eq(index).css({'color': 'green'}); }); }, 2500); } textAnimationLoop(); setInterval(function() { textAnimationLoop(); }, 5000); }); </script> </body> </html> |
Kontakt Datenschutz Impressum |