diff --git a/snippets/css/s/alternating-text.md b/snippets/css/s/alternating-text.md index 2859f6a39..26dba8048 100644 --- a/snippets/css/s/alternating-text.md +++ b/snippets/css/s/alternating-text.md @@ -10,26 +10,24 @@ dateModified: 2023-05-25T15:04:40+03:00 Creates an alternating text animation. - Create a `` for the text that will be alternated. -- Define an animation `alternate-text` that makes the `` disappear by setting `display: none`. -- Use JavaScript to define an array of the different words that will be alternated and use the first word to initialize the content of the ``. -- Define an event listener that will be triggered when an iteration of the animation is completed. -- Every time the event is triggered, the next word from the array is set as content of the ``. +- Define an animation, `alternating-text`, that makes the `` disappear by setting `display: none`. +- In JavaScript, define an array of the different words that will be alternated and use the first word to initialize the content of the ``. +- Use `EventTarget.addEventListener()` to define an event listener for the `'animationiteration'` event. This will run the event handler whenever an iteration of the animation is completed. +- Use `Element.innerHTML` to display the next element in the array as the content of the ``. ```html -

- I love coding in . -

+

I love coding in .

``` ```css -.alternating{ - animation-name: alternate-text; +.alternating { + animation-name: alternating-text; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease; } -@keyframes alternate-text { +@keyframes alternating-text { 90% { display: none; } @@ -37,19 +35,15 @@ Creates an alternating text animation. ``` ```js -const text = ['Java','Python','C','C++','C#','Javascript']; -const dynamicallyAlternatingText = document.getElementById('alternating-text'); -dynamicallyAlternatingText.innerHTML = text[0]; -dynamicallyAlternatingText.addEventListener("animationiteration", listener, false); - +const texts = ['Java','Python','C','C++','C#','Javascript']; +const element = document.getElementById('alternating-text'); let i = 0; -function listener(event){ - if (i { + i = i < texts.length-1 ? i + 1 : 0; + element.innerHTML = texts[i]; } + +element.innerHTML = texts[0]; +element.addEventListener("animationiteration", listener, false); ```