How can I use Jquery to make a css array?

user3006457
May 1, 2023
164 views
3 votes
3 Answers

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>

Answers

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>

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>

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>

Please signup or login to give your own answer.

Click here to cancel reply.