skip to Main Content

With Jquery I am breaking a paragraph apart to animate each word individually through an array.
Now I would like to us the same array to allocate a .css to the individual words.
How do I set this up in the script?

The script at the bottom breaks the paragraph apart. Currently I have written out the list of css span classes. But I would love to make this dynamic as well, using the same jquery array.

<!DOCTYPE html>
<html lang='en' class=''>

<head>

  <meta charset='UTF-8'>
  <title>Animated copy</title>

  <meta name="robots" content="noindex">


  <style id="INLINE_PEN_STYLESHEET_ID">
    @import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");

* {
  padding: 0;
  margin: 0;
}

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

h1 {
  font-family: "Montserrat Medium";
  max-width: 60ch;
  text-align: center;
 transform: scale(0.94);
  animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
}
@keyframes scale {
  100% {
    transform: scale(1);
  }
}

span {
  display: inline-block;
  opacity: 0;
}


<!--This list of CSS lines should be done with an array -->
span:nth-child(1) {
  animation: anim-lineUp 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0); 
    
}

span:nth-child(2) {
  animation: fade-in 0.8s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(3) {
  animation: fade-in 0.8s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(4) {
  animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(5) {
  animation: fade-in 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(6) {
  animation: fade-in 0.8s 0.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(7) {
  animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(8) {
  animation: fade-in 0.8s 0.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(9) {
  animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(10) {
  animation: fade-in 0.8s 1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(11) {
  animation: fade-in 0.8s 1.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(12) {
  animation: fade-in 0.8s 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(13) {
  animation: fade-in 0.8s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(14) {
  animation: fade-in 0.8s 1.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(15) {
  animation: fade-in 0.8s 1.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(16) {
  animation: fade-in 0.8s 1.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(17) {
  animation: fade-in 0.8s 1.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(18) {
  animation: fade-in 0.8s 1.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

@keyframes fade-in {
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
       
.lineUp {
  animation: 1.5s anim-lineUp ease-out ;
}

@keyframes anim-lineUp {
  0% {
    opacity: 0;
    transform: translateY(20%);
  }
  20% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    transform: translateY(0%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
      
  </style>
  <script src="https://code.jquery.com/jquery-3.6.3.js"></script> 
    

</head>

<body>
  <h1>
  <p>It is a lawless time. Crime Syndicates compete for resources – food, medicine, and hyperfuel. On the shipbuilding planet of Corellia, the foul Lady Proxima forces runaways into a life of crime in exchange for shelter and protection. On these mean streets, a young man fights for survival, but yearns to fly among the stars…” </p>
</h1>

    
<!--Jquery to break words apart, that should also add a css rule to each word -->   
 <script>
var words = $( "p" ).first().text().split( /s+/ );
var text = words.join( "</span> <span>" );
$( "p" ).first().html( "<span>" + text + "</span>" );
$( "span" ).on( "click", function() {
  $( this ).css("animation: 1.5s anim-lineUp ease-out forwards");
    
});
</script>

 
  

  
</body>

</html>

3

Answers


  1. I think the Element.animate() API fits better here. The below example also doesn’t use jQuery, but the basic idea is the same…

    const animation = [
      {
        opacity: 0,
      },
      {
        opacity: 1,
      },
    ];
    const options = {
      duration: 1000,
      iterations: 1,
      fill: "both",
    };
    const para = document.querySelector("p");
    para.innerHTML = para.innerText
      .split(/s+/g)
      .map((word) => `<span>${word}</span>`)
      .join(" ");
    [...para.querySelectorAll("span")].forEach((span, index) => {
      span.animate(animation, { ...options, delay: index * 200 });
    });
    <p>It is a lawless time. Crime Syndicates compete for resources – food, medicine, and hyperfuel. On the shipbuilding planet of Corellia, the foul Lady Proxima forces runaways into a life of crime in exchange for shelter and protection. On these mean streets,
      a young man fights for survival, but yearns to fly among the stars…”</p>
    Login or Signup to reply.
  2. Here is a simpler example of how you can loop through your words array and add a class based on some criteria.

    const words = $( "p" ).first().text().split( /s+/ );
    let out = '';
    $.each(words, function(idx, word){
      if (word.length < 5){
        out += `<span class="ani1">${word} </span>`;
      }else{
        out += `<span class="ani2">${word} </span>`;
      }
    });
    $('body').html(out);
    .ani1{color:red;}
    .ani2{color:green;}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <p>It was a dark and stormy night. The maid screamed. A door slammed. Suddenly a pirate ship appears on the horizon.</p>
    Login or Signup to reply.
  3. You can apply the CSS animation-delay dynamically.

    First set the non-dynamic part of the animation styling to the span tag:

    span {
      display: inline-block;
      opacity: 0;
      animation: fade-in 0.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
    }
    

    Then apply the specific CSS like this:

    const $spans = words.map((word, i) =>
        $("<span>").text(word + "xa0").css({ animationDelay: `${i/10}s` })
    );
    

    Snippet:

    const words = $( "p" ).first().text().match(/S+/g);
    const $spans = words.map((word, i) =>
        $("<span>").text(word + "xa0").css({ animationDelay: `${i/10}s` })
    );
    $( "p" ).first().empty().append($spans);
    @import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
    
    * {
      padding: 0;
      margin: 0;
    }
    
    body {
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    
    h1 {
      font-family: "Montserrat Medium";
      max-width: 60ch;
      text-align: center;
      transform: scale(0.94);
      animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
      font-size: smaller;
    }
    @keyframes scale {
      100% {
        transform: scale(1);
      }
    }
    
    span {
      display: inline-block;
      opacity: 0;
      animation: fade-in 0.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
    }
    
    @keyframes fade-in {
      100% {
        opacity: 1;
        filter: blur(0);
      }
    }
           
    .lineUp {
      animation: 1.5s anim-lineUp ease-out ;
    }
    
    @keyframes anim-lineUp {
      0% {
        opacity: 0;
        transform: translateY(20%);
      }
      20% {
        opacity: 0;
      }
      50% {
        opacity: 1;
        transform: translateY(0%);
      }
      100% {
        opacity: 1;
        transform: translateY(0%);
      }
    }
    <script src="https://code.jquery.com/jquery-3.6.3.js"></script> 
    <h1>
      <p>It is a lawless time. Crime Syndicates compete for resources – food, medicine, and hyperfuel. On the shipbuilding planet of Corellia, the foul Lady Proxima forces runaways into a life of crime in exchange for shelter and protection. On these mean streets, a young man fights for survival, but yearns to fly among the stars…” </p>
    </h1>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search