jQuery: CSS text animation for different text lengths

user_12501851 0
Viewed 67

This is my animation:

.ani span {
  animation: animation 1s infinite;
  display: inline-table;
}

@keyframes animation {
  0% {
    transform: translateY(0px);
  }
  33.333% {
    transform: translateY(-5px);
  }
  66.666% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0px);
  }
}

.ani span:nth-child(1) {
  animation-delay: .1s;
}

.ani span:nth-child(2) {
  animation-delay: .2s;
}

.ani span:nth-child(3) {
  animation-delay: .3s;
}

.ani span:nth-child(4) {
  animation-delay: .4s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="ani"><span>h</span><span>e</span><span>l</span><span>l</span><span>o</span></div>

I will have different texts (not only »hello«) that should have this animation. So it would be great to have it as jQuery function. There should be calculated the text length, automatically placed <span></span>, and a fitting animation-delay.

How is it possible to code that?

Would be sooooo thankful for help.

jquery javascript
2 Answers

You could do it like this:

var div, aniDivs, i,j;
aniDivs = document.querySelectorAll("div.ani");

for (var i = 0, len = aniDivs.length; i < len; i++) {
  div = document.querySelectorAll("div.ani")[i];
  let span = "";
  for (j = 0; j < div.innerText.length; j++) {
    if (div.innerText[j] !== " ") {
      span += "<span style='animation-delay:." + (j + 1) + "s'>";
      span += div.innerText[j];
      span += "</span>";
    }
  }
  div.innerHTML = span;
}
.ani span {
  animation: animation 1s infinite;
  display: inline-table;
}

@keyframes animation {
  0% {
    transform: translateY(0px);
  }
  33.333% {
    transform: translateY(-5px);
  }
  66.666% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0px);
  }
}

.ani span:nth-child(1) {
  animation-delay: .1s;
}

.ani span:nth-child(2) {
  animation-delay: .2s;
}

.ani span:nth-child(3) {
  animation-delay: .3s;
}

.ani span:nth-child(4) {
  animation-delay: .4s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ani">Welcome</div>
<div class="ani">again</div>

For this answer I incorporated this answer How to wrap each character from a string in spans given by Danny Fardy Jhonston Bermúdez.

user_39431250

This should work for string of arbitrary length

$aniDivs = $('.ani'); // collect all the divs that have 'ani' class

//loop over each
$aniDivs.each(function(divIndex, div){
 
   //HTML part

   var divTxt = $(div).text(); 
   // get the text that's inside the ani div (ie. "hello" )

   var lettersArr = divTxt.split(''); 
   // make an array of letters that constitute the word (ie. ["h", "e", "l", "l", "o"] )

   var spanContent = ''; 
   // a bucket to hold the spans that we create dynamically
 
   $.each(lettersArr, function(letterIndex, letter){
     spanContent+= '<span>'+letter+'</span>';
   });

   // Now we have <span>h</span><span>e</span><span>l</span><span>l</span><span>o</span>

   $(div).html(spanContent); 
   // put it inside current ani <div>


   //CSS part

   var delay = 0.1;
   //now we collect the the <spans> that we just created and appended and increment the animation-delay in a progression

   $(div).find('span').each(function(spanIndex,span){
     $(span).css('animation-delay', delay.toFixed(1)+'s' );
     delay=delay+0.1; // displace every subsequent div to .1 second from previous
   });
});
.ani span {
  animation: animation 1s infinite;
  display: inline-table;
}

@keyframes animation {
  0% {
    transform: translateY(0px);
  }
  33.333% {
    transform: translateY(-5px);
  }
  66.666% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0px);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="ani">Lopadotemachoselachogaleokranioleipsanodrimhypotrimmatosilphioparaomelitokatakechymenokichlepikossyphophattoperisteralektryonoptekephalliokigklopeleiolagoiosiraiobaphetraganopterygon</div>

user_61606620
Related