From e0e6492e055dc62d2c6b18ee1af310fcf828f0ee Mon Sep 17 00:00:00 2001 From: Dimitra Be Date: Thu, 25 May 2023 15:06:09 +0300 Subject: [PATCH 1/3] Add alternating text snippet --- snippets/css/s/alternating-text.md | 55 ++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 snippets/css/s/alternating-text.md diff --git a/snippets/css/s/alternating-text.md b/snippets/css/s/alternating-text.md new file mode 100644 index 000000000..2859f6a39 --- /dev/null +++ b/snippets/css/s/alternating-text.md @@ -0,0 +1,55 @@ +--- +title: Alternating text +type: snippet +language: css +tags: [animation] +cover: italian-horizon +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 ``. + +```html +

+ I love coding in . +

+``` + +```css +.alternating{ + animation-name: alternate-text; + animation-duration: 3s; + animation-iteration-count: infinite; + animation-timing-function: ease; +} + +@keyframes alternate-text { + 90% { + display: none; + } +} +``` + +```js +const text = ['Java','Python','C','C++','C#','Javascript']; +const dynamicallyAlternatingText = document.getElementById('alternating-text'); +dynamicallyAlternatingText.innerHTML = text[0]; +dynamicallyAlternatingText.addEventListener("animationiteration", listener, false); + +let i = 0; + +function listener(event){ + if (i Date: Thu, 25 May 2023 22:49:23 +0300 Subject: [PATCH 2/3] Update alternating-text.md --- snippets/css/s/alternating-text.md | 38 +++++++++++++----------------- 1 file changed, 16 insertions(+), 22 deletions(-) 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); ``` From 5b07f98032f3f00feb0cf16b7a091289d600e3e4 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Thu, 25 May 2023 22:50:36 +0300 Subject: [PATCH 3/3] Update alternating-text.md --- snippets/css/s/alternating-text.md | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/snippets/css/s/alternating-text.md b/snippets/css/s/alternating-text.md index 26dba8048..03cd6a695 100644 --- a/snippets/css/s/alternating-text.md +++ b/snippets/css/s/alternating-text.md @@ -35,15 +35,16 @@ Creates an alternating text animation. ``` ```js -const texts = ['Java','Python','C','C++','C#','Javascript']; +const texts = ['Java', 'Python', 'C', 'C++', 'C#', 'Javascript']; const element = document.getElementById('alternating-text'); -let i = 0; -const listener = (e) => { - i = i < texts.length-1 ? i + 1 : 0; +let i = 0; +const listener = e => { + i = i < texts.length - 1 ? i + 1 : 0; element.innerHTML = texts[i]; -} +}; element.innerHTML = texts[0]; -element.addEventListener("animationiteration", listener, false); +element.addEventListener('animationiteration', listener, false); + ```