(() => { const pEle = document.querySelector('#animated-text'); const spanEle = pEle.querySelector('span'); const words = JSON.parse(spanEle.dataset.words); let count = 0; setInterval(function(){ spanEle.innerHTML = words[count]; if (count < words.length - 1) count = count + 1; else count = 0; }, Math.ceil(Math.random() * 5) * 1000); })();
<style> #animated-text span { color: red; } </style> <p id="animated-text"> Lorem ipsum, or lipsum as it is sometimes known, <span data-words='["One", "Two", "Three"]'>Default </span> is dummy text used in laying out print, graphic or web designs. </p>
if you want something already done: animate.style
Look at the "slideInUp". You have just to play with the class to get the animation that you want. And you can add some code to modifiy them, if you want.
The Github Project: animate.css
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.