HKN

html knowhow

Regenbogen Textanimation










Regenbogen Textanimation

So sieht´s aus

Quellcode
<html>
<head>

<style type="text/css">
@keyframes rainbow { from {opacity: 1;} to {stroke-dasharray: 601.5; opacity: 1; }}
@keyframes letter-animation {
0% {transform: rotate(-20deg) translateY(-40px) scale(1); opacity: 1;}
20% {transform: rotate(-20deg) translateY(-60px) scale(1.3);}
100% {transform: rotate(0deg) translateY(0) scale(1); opacity: 1;} }
#inner-text {position: relative; z-index: 1;}
#text-spot {height: 150px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;}
.letter {display: inline-block; animation-name: letter-animation; animation-duration: 300ms; animation-timing-function: ease-in; animation-fill-mode: forwards;
transform: rotate(-10deg) translateY(-20px); opacity: 0; font-family: 'Londrina Solid', cursive; color: white; font-size: 100px; text-shadow: 0 3px 0 black;}
circle {opacity: 0; animation-duration: 1000ms; animation-timing-function: ease-in; animation-fill-mode: forwards;}
circle:nth-child(4) {stroke-dasharray: 251.5;}
circle:nth-child(3) {stroke-dasharray: 188.5;}
circle:nth-child(2) {stroke-dasharray: 125.5;}
circle:nth-child(1) {stroke-dasharray: 62.5;}
circle:nth-child(0) {stroke-dasharray: .5;}
</style>
</head>

<body >
<div id="text-spot">
<svg id="rainbow" height='100' width='200'>
<circle class='colored-circle' cx='100' cy='100' fill='transparent' r='20' stroke-width='10px' stroke='#fc03a1'></circle>
<circle class='colored-circle' cx='100' cy='100' fill='transparent' r='40' stroke-width='10px' stroke='#0367fc'></circle>
<circle class='colored-circle' cx='100' cy='100' fill='transparent' r='60' stroke-width='10px' stroke='#fcba03'></circle>
<circle class='colored-circle' cx='100' cy='100' fill='transparent' r='80' stroke-width='10px' stroke='#fc0339'></circle>
</svg>
<div id="inner-text"></div><form id="custom-text-form"></form></div>
<script>document.addEventListener("DOMContentLoaded", function () {
var circleElements = Array.from(document.getElementsByTagName('circle'));
var circleParentNode;
function drawText(word) {
word = word || 'HTML Knowhow';
var wordArray = word.split('');
var innerTextElement = document.getElementById('inner-text');
innerTextElement.innerHTML = '';
var fontElement = document.getElementById('font');
var colorIndex = 0;
var colors = [
'#fc0339',
'#fc4103',
'#fcba03',
'#83d13f',
'#0367fc',
'#4d2bbd',
'#fc03a1',
];
circleElements.forEach(function (circle, index) {
circleParentNode = circleParentNode || circle.parentNode;
circleParentNode.removeChild(circle);
circle.style['animation-name'] = '';
});
wordArray.forEach(function(letter, index) {
var span = document.createElement('span');
span.textContent = letter;
span.className = 'letter';
span.style['animation-delay'] = (400 * index) + 'ms';
span.style['color'] = colors[colorIndex];
innerTextElement.appendChild(span);
colorIndex++;
if (colorIndex >= colors.length) {
colorIndex = 0;
}
});
circleElements.forEach(function (circle, index) {
circleParentNode.appendChild(circle);
circle.style['animation-name'] = 'HTML Knowhow';
var delay = (wordArray.length + (circleElements.length - index));
circle.style['animation-delay'] = 400 * delay + 'ms';
});
}
document.getElementById('custom-text-form').addEventListener('submit', function (e) {
e.preventDefault();
e.stopPropagation();
drawText(document.getElementById('custom-text').value);
});
drawText();
});
</script>
</body>

</html>








Kontakt    Datenschutz   Impressum