html knowhow

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