andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update alternating-text.md

Browse Source
This commit is contained in:
Angelos Chalaris
2023-05-25 22:49:23 +03:00
committed by GitHub
parent e0e6492e05
commit 3e60750403
1 changed files with 16 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
snippets/css/s/alternating-text.md
View File

@ -10,26 +10,24 @@ dateModified: 2023-05-25T15:04:40+03:00
Creates an alternating text animation. Creates an alternating text animation.
- Create a `<span>` for the text that will be alternated. - Create a `<span>` for the text that will be alternated.
- Define an animation `alternate-text` that makes the `<span>` disappear by setting `display: none`. - Define an animation, `alternating-text`, that makes the `<span>` 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 `<span>`. - In JavaScript, define an array of the different words that will be alternated and use the first word to initialize the content of the `<span>`.
- Define an event listener that will be triggered when an iteration of the animation is completed. - 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.
- Every time the event is triggered, the next word from the array is set as content of the `<span>`. - Use `Element.innerHTML` to display the next element in the array as the content of the `<span>`.
```html ```html
<p> <p>I love coding in <span class="alternating" id="alternating-text"></span>.</p>
I love coding in <span class="alternating" id="alternating-text"></span>.
</p>
``` ```
```css ```css
.alternating{ .alternating {
animation-name: alternate-text; animation-name: alternating-text;
animation-duration: 3s; animation-duration: 3s;
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-timing-function: ease; animation-timing-function: ease;
} }
@keyframes alternate-text { @keyframes alternating-text {
90% { 90% {
display: none; display: none;
} }
@ -37,19 +35,15 @@ Creates an alternating text animation.
``` ```
```js ```js
const text = ['Java','Python','C','C++','C#','Javascript']; const texts = ['Java','Python','C','C++','C#','Javascript'];
const dynamicallyAlternatingText = document.getElementById('alternating-text'); const element = document.getElementById('alternating-text');
dynamicallyAlternatingText.innerHTML = text[0];
dynamicallyAlternatingText.addEventListener("animationiteration", listener, false);
let i = 0; let i = 0;
function listener(event){ const listener = (e) => {
if (i<text.length-1){ i = i < texts.length-1 ? i + 1 : 0;
i++; element.innerHTML = texts[i];
}else{
i = 0;
}
dynamicallyAlternatingText.innerHTML = text[i];
} }
element.innerHTML = texts[0];
element.addEventListener("animationiteration", listener, false);
``` ```