jQuery: CSS text animation for different text lengths

Question

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.

I will have different <div class="ani">...</div> with different text and would need a jQuery function to automatize it. — Anna_B
– Anna_B, Commented May 10, 2020 at 16:51
You mean breaking a work to <span>t</span></span>h</span><span>i</span<span>s</span> form? Did you try any code? — Vinay
– Vinay, Commented May 10, 2020 at 16:54
Yes, and automatically add a fitting "animation-delay". I tried a lot, but it doesn't work as expected. — Anna_B
– Anna_B, Commented May 10, 2020 at 16:55
"fitting "animation-delay"" would be just an arithmetic progression based on how many letter you have — Vinay
– Vinay, Commented May 10, 2020 at 17:02

matthias_h · Accepted Answer · 2020-05-10 17:24:05Z

2

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.

answered May 10, 2020 at 17:24

matthias_h

11.4k9 gold badges24 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

matthias_h Over a year ago

@Anna_B Glad that I was able to help :)

Vinay · Accepted Answer · 2020-05-10 18:05:20Z

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>

Collectives™ on Stack Overflow

jQuery: CSS text animation for different text lengths

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related