JSFiddle - React, Tailwind, and code Playground
HTML
<p id="changingP">
<span class="fadeIn">Want </span><span class="fadeIn">to </span><span class="fadeIn">get </span><span class="fadeIn">in</span><span class="fadeIn"> contact</span><span class="fadeIn"> with </span><span class="fadeIn">me</span><span class="fadeIn">?</span><br /><span class="fadeIn">Email</span><span class="fadeIn">: </span><span class="fadeIn">matt</span><span class="fadeIn">.</span><span class="fadeIn">mow</span><span class="fadeIn">ris</span><span class="fadeIn">@</span><span class="fadeIn">gmail</span><span class="fadeIn">.</span><span class="fadeIn">com</span><br /><span class="fadeIn">Link</span><span class="fadeIn">edI</span><span class="fadeIn">n</span><span class="fadeIn">: </span><span class="fadeIn">http</span><span class="fadeIn">s://w </span><span class="fadeIn"></span><span class="fadeIn">ww.</span><span class="fadeIn">lin</span><span class="fadeIn">kedi</span><span class="fadeIn">n.com</span><span class="fadeIn">/</span><span class="fadeIn">in/</span><span class="fadeIn">mat</span><span class="fadeIn">tm</span><span class="fadeIn">owris</span>
</p>
CSS
.fadeIn {
opacity = 0;
}
JavaScript
$(document).ready(function() {
var spanArray = [];
var spanLength, index;
/* Populate array with all elements of class .fadeIn */
$(".fadeIn").each(function() {
spanArray.push(this);
})
spanLength = (spanArray.length);
for(var i = 0; i < 33; i++) {
index = Math.floor(Math.random() * (spanArray.length));
$(spanArray[index]).delay(400).fadeTo(500,1, function() {
$(spanArray).splice(index,1);
});
}
});