Hey,
I just started using Grav recently. English is not my mother tongue, so I hope you'll understand my problem.
I want to animate text as in I want each syllable of a text to be shown. The text that has already been shown should stay there until the whole text has been shown, then it can start again. The syllables should also be coloured (alternating).
I have some code in markdown to colour words and I also have some code to show a text. I just can't put it together (the colour and the animation). It won't work if i put the colours into the animation. You can see the code down below.
I also tried to write code in html and javascript. the code worked perfectly on other sites but not in grav. (Just animating the text, nothing was coloured)
Has somebody got a solution for this?
Thank you very much!
{c:red}Hey{/c}{c:blue}it's{/c} {c:green} me{/c} {c:yellow} your{/c}{c:pink} home{/c}{c:orange}boy
{/c}{c:purple} Forrest{/c}
[ui-animated-text words="Yo ya ye yu" animation="letters type" element="h2"][/ui-animated-text]
< h1 class="animated-text">Thanks for your help</h1>
.animated-text {
font-family: monospace;
overflow: hidden;
height:1.1em;
word-wrap: break-word;
white-space: nowrap;
animation: typing 4s steps(48) forwards;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 48ch;
}
< h1 class="animated-text">Thanks for your help</h1>
var character_count = $('.animated-text').text().length;
$('.animated-text').css('animation', 'typing 4s steps(' + character_count + ') forwards').css('font-family', 'monospace');
$('<style>@keyframes typing {from {width: 0; } to {width: ' + character_count + 'ch; } }</style>').appendTo('head');