How to style text from JS string

Question

I am using this typewriter effect made with JavaScript, HTML and CSS (method seen below) but I am wanting to take it a step further. Is there a way I can change the font of each word that is typed? I've looked around for solutions but I honestly don't even know what to search for. Please let me know if this is possible.

var words = ['Design','Create','Dream', 'Inspire'], currentStep = 0, textEl = document.querySelector('.change-text'), oldWord = ''; setTimeout(changeWord, 2000); function changeWord() { oldWord = textEl.innerHTML; // check if there is a word atm or not if (oldWord.length < 1) { if (currentStep !== words.length -1) { currentStep ++; }else { currentStep = 0; } addNextWord(); } else { setTimeout(deleteWord, 1400); } }; function deleteWord() { var WordLength = oldWord.length, currentWord = textEl.innerHTML, currentLength = currentWord.length; // The word is deleted so, start adding in the new one if (currentLength < 1) { changeWord(); return; } // Remove a charachter textEl.innerHTML = currentWord.substring(0, currentLength - 1); setTimeout(deleteWord, 140); } function addNextWord() { var currentWord = textEl.innerHTML, currentLength = currentWord.length, nextWord = words[currentStep], nextWordLength = nextWord.length; if (currentLength === nextWordLength) { changeWord(); return; } // add a charachter textEl.innerHTML = nextWord.substring(0, currentLength + 1); setTimeout(addNextWord, 240); }

#first-section{ z-index: 4; background-image: linear-gradient(to top, #205ba8 0%, #537895 100%); position: relative; width: 100%; min-height: 100vh; display: flex; } .inspire{ padding: 0; margin: 0; position: absolute; top: 0; left: 10%; color: #fff; font-size: 50px; font-weight: 600; font-family: sans-serif; } .change-text { position: absolute; bottom: 0; left: 10%; color: #fff; line-height: 500px; font-size: 70px; font-weight: 900; cursor: context-menu; } @keyframes blinking { 0% { opacity: 0; } 50% { opacity: 0; } 51% { opacity: 1; } 100% { opacity: 1; } } .change-text:after { content: '_'; animation: blinking 1.2s infinite; }

<section id="first-section"> <h1 class="inspire" data-aos="fade-right"> HERE TO: </h1> <div class="change-text" data-aos="fade-right">Design</div> </section>

You've to wrap each word into an element (ex.<span>) having a class defining the font (or an inline style attribute). — Teemu
– Teemu, Commented Aug 17, 2020 at 12:05
I don't see any effects at all in Firefox and Chrome on Mac, it just says here to: ; nothing is happening,. In answers also... — ikiK
– ikiK, Commented Aug 17, 2020 at 12:23

anees · Accepted Answer · 2020-08-17 12:17:52Z

you can use array of objects for the words. Add your custom fonts to each word. And then change the font dynamically. I have tweaked the timer to show it quick between.

var words = [ { word: 'Design', font: 'Cursive' }, { word: 'Create', font: 'Serif' }, { word: 'Dream', font: 'Sans-Serif' }, { word: 'Inspire', font: `'Pangolin', cursive` } ], currentStep = 0, textEl = document.querySelector('.change-text'), oldWord = ''; setTimeout(changeWord, 2000); function changeWord() { oldWord = textEl.innerHTML; // check if there is a word atm or not if (oldWord.length < 1) { if (currentStep !== words.length -1) { currentStep ++; }else { currentStep = 0; } textEl.style.fontFamily = words[currentStep].font; addNextWord(); } else { setTimeout(deleteWord, 100); } }; function deleteWord() { var WordLength = oldWord.length, currentWord = textEl.innerHTML, currentLength = currentWord.length; // The word is deleted so, start adding in the new one if (currentLength < 1) { changeWord(); return; } // Remove a charachter textEl.innerHTML = currentWord.substring(0, currentLength - 1); setTimeout(deleteWord, 140); } function addNextWord() { var currentWord = textEl.innerHTML, currentLength = currentWord.length, nextWord = words[currentStep].word, nextWordLength = nextWord.length; if (currentLength === nextWordLength) { changeWord(); return; } // add a charachter textEl.innerHTML = nextWord.substring(0, currentLength + 1); setTimeout(addNextWord, 240); }

@import url('https://fonts.googleapis.com/css2?family=Pangolin&display=swap'); #first-section{ z-index: 4; background-image: linear-gradient(to top, #205ba8 0%, #537895 100%); position: relative; width: 100%; min-height: 100vh; display: flex; } .inspire{ padding: 0; margin: 0; position: absolute; top: 0; left: 10%; color: #fff; font-size: 50px; font-weight: 600; font-family: sans-serif; } .change-text { position: absolute; bottom: 0; left: 10%; color: #fff; line-height: 500px; font-size: 70px; font-weight: 900; cursor: context-menu; } @keyframes blinking { 0% { opacity: 0; } 50% { opacity: 0; } 51% { opacity: 1; } 100% { opacity: 1; } } .change-text:after { content: '_'; animation: blinking 1.2s infinite; }

<section id="first-section"> <h1 class="inspire" data-aos="fade-right"> HERE TO: </h1> <div class="change-text" data-aos="fade-right"></div> </section>

Simone Rossaini · Accepted Answer · 2020-08-17 12:15:04Z

Follow my example i add a simple if, engines the counter of array word and finally change font.

var words = ['Design','Create','Dream', 'Inspire'], currentStep = 0, textEl = document.querySelector('.change-text'), oldWord = ''; setTimeout(changeWord, 2000); function changeWord() { oldWord = textEl.innerHTML; // check if there is a word atm or not if (oldWord.length < 1) { if (currentStep !== words.length -1) { currentStep ++; }else { currentStep = 0; } if(currentStep == 0){ textEl.style.fontFamily = "Impact,Charcoal,sans-serif"; }else if(currentStep== 1){ textEl.style.fontFamily = "Times New Roman"; }else if(currentStep == 2){ textEl.style.fontFamily = "Palatino Linotype"; }else if(currentStep == 3){ textEl.style.fontFamily = "Georgia"; } addNextWord(); } else { setTimeout(deleteWord, 1400); } }; function deleteWord() { var WordLength = oldWord.length, currentWord = textEl.innerHTML, currentLength = currentWord.length; // The word is deleted so, start adding in the new one if (currentLength < 1) { changeWord(); return; } // Remove a charachter textEl.innerHTML = currentWord.substring(0, currentLength - 1); setTimeout(deleteWord, 140); } function addNextWord() { var currentWord = textEl.innerHTML, currentLength = currentWord.length, nextWord = words[currentStep], nextWordLength = nextWord.length; if (currentLength === nextWordLength) { changeWord(); return; } // add a charachter textEl.innerHTML = nextWord.substring(0, currentLength + 1); setTimeout(addNextWord, 240); }

#first-section{ z-index: 4; background-image: linear-gradient(to top, #205ba8 0%, #537895 100%); position: relative; width: 100%; min-height: 100vh; display: flex; } .inspire{ padding: 0; margin: 0; position: absolute; top: 0; left: 10%; color: #fff; font-size: 50px; font-weight: 600; font-family: sans-serif; } .change-text { position: absolute; bottom: 0; left: 10%; color: #fff; line-height: 500px; font-size: 70px; font-weight: 900; cursor: context-menu; } @keyframes blinking { 0% { opacity: 0; } 50% { opacity: 0; } 51% { opacity: 1; } 100% { opacity: 1; } } .change-text:after { content: '_'; animation: blinking 1.2s infinite; }

<section id="first-section"> <h1 class="inspire" data-aos="fade-right"> HERE TO: </h1> <div class="change-text" data-aos="fade-right">Design</div> </section>

Yuran Pereira · Accepted Answer · 2020-08-17 12:28:08Z

You can add all the fonts that you wish to use to an array, then create a function that selects them randomly.

var fonts = ['verdana', 'arial', 'timesNewRoman']; function changeFont() { var font = fonts[Math.floor(Math.random() * fonts.length)]; textEl.style.fontFamily = font; }

Then call this function right after you call addNextWord

function changeWord() { oldWord = textEl.innerHTML; // check if there is a word atm or not if (oldWord.length < 1) { if (currentStep !== words.length -1) { currentStep ++; }else { currentStep = 0; } addNextWord(); changeFont(); // Call changeFont Here!! } else { setTimeout(deleteWord, 1400); } }

Collectives™ on Stack Overflow

How to style text from JS string

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related