What is the process for animating classes instead of ids in CSS?

Question

What is the process for animating classes instead of ids in CSS?

My webpage currently features a setup similar to this.

function wiggle(){
  var parent = document.getElementById("wiggle");

  var string = parent.innerHTML;
  parent.innerHTML = "";
  string.split("");
  var i = 0, length = string.length;
  for (i; i < length; i++) {
      parent.innerHTML += "<span style='--n:"+ (100 * i - 10000 + 'ms') + ";'>" + string[i] + "</span>";
  }

}

wiggle()

#wiggle span{
  animation-delay: var(--n);
  animation: wave 2s linear var(--n) infinite forwards running;
  position: relative;
}

@keyframes wave{
  0% {top: 0px;}
  25% {top: -4px;}
  50% {top: 0px;}
  75% {top: 4px;}
  100% {top: 0px;}
}

<h1 id="wiggle">This text should wiggle...</h1>

<h2 id="wiggle">...while this text should not.</h2>

The current setup involves JavaScript splitting the ID of each letter into separate <span> tags, while CSS assigns animation delays and specifies the height of the animation waves. However, I aim to extend this animation to multiple headers on my page by targeting classes instead of IDs. Unfortunately, changing getElementById to getElementsByClassName, as well as modifying #wiggle to .wiggle, did not yield the desired outcome, and the animation no longer displays. Is there a way to modify the JavaScript to target classes without disrupting its functionality?

javascript html jquery css css-animations

Answer 1

Answer №1

To prevent the wiggle effect, do not include the "wiggle" class.

const shake = (elementOrSelector) => {
  const element = typeof elementOrSelector === 'string'
    ? document.querySelector(elementOrSelector)
    : elementOrSelector;
  if (!element.classList.contains('shake')) {
    element.classList.add('shake'); // Alternatively, use a data attribute for control
  }
  const text = element.textContent;
  element.textContent = '';
  element.innerHTML = text.split('').reduce((html, c, i) =>
    (html + `<span style="--n:${10 * i - 10000}ms;">${c}</span>`), '');
};

const shakeAll = () => {
  document.querySelectorAll('.shake').forEach(shake);
}

shakeAll(); // Apply shake effect to all elements

shake('.shake-single'); // Manually trigger the shake effect

@keyframes wave {
  0%   { top:  0px; }
  25%  { top: -4px; }
  50%  { top:  0px; }
  75%  { top:  4px; }
  100% { top:  0px; }
}

.shake span {
  animation-delay: var(--n);
  animation: wave 2s linear var(--n) infinite forwards running;
  position: relative;
}

<h1 class="shake">This text will shake...</h1>

<h2>...while this text will remain still...</h2>

<h1 class="shake">...but this one will shake.</h1>

<h1 class="shake-single">Trigger manual shake effect...</h1>

If desired, consider adding a class to the span elements and updating your CSS styles to provide more flexibility and separation between the elements and their containers.

const shake = (elementOrSelector) => {
  const element = typeof elementOrSelector === 'string'
    ? document.querySelector(elementOrSelector)
    : elementOrSelector;
  const text = element.textContent;
  element.textContent = '';
  element.innerHTML = text.split('').reduce((html, c, i) =>
    (html + `<span class="shaker" style="--n:${10 * i - 10000}ms;">${c}</span>`), '');
};

const shakeAll = () => {
  document.querySelectorAll('.shake').forEach(shake);
}

shakeAll(); // Shake all elements

shake('.shake-single'); // Trigger the shake effect manually

@keyframes wave {
  0%   { top:  0px; }
  25%  { top: -4px; }
  50%  { top:  0px; }
  75%  { top:  4px; }
  100% { top:  0px; }
}

.shaker {
  animation-delay: var(--n);
  animation: wave 2s linear var(--n) infinite forwards running;
  position: relative;
}

<h1 class="shake">This text will shake...</h1>

<h2>...while this text will remain still...</h2>

<h1 class="shake">...but this one will shake.</h1>

<h1 class="shake-single">Trigger the shake effect manually...</h1>

Answer 2

To prevent the wiggle effect, do not include the "wiggle" class.

const shake = (elementOrSelector) => {
  const element = typeof elementOrSelector === 'string'
    ? document.querySelector(elementOrSelector)
    : elementOrSelector;
  if (!element.classList.contains('shake')) {
    element.classList.add('shake'); // Alternatively, use a data attribute for control
  }
  const text = element.textContent;
  element.textContent = '';
  element.innerHTML = text.split('').reduce((html, c, i) =>
    (html + `<span style="--n:${10 * i - 10000}ms;">${c}</span>`), '');
};

const shakeAll = () => {
  document.querySelectorAll('.shake').forEach(shake);
}

shakeAll(); // Apply shake effect to all elements

shake('.shake-single'); // Manually trigger the shake effect

@keyframes wave {
  0%   { top:  0px; }
  25%  { top: -4px; }
  50%  { top:  0px; }
  75%  { top:  4px; }
  100% { top:  0px; }
}

.shake span {
  animation-delay: var(--n);
  animation: wave 2s linear var(--n) infinite forwards running;
  position: relative;
}

<h1 class="shake">This text will shake...</h1>

<h2>...while this text will remain still...</h2>

<h1 class="shake">...but this one will shake.</h1>

<h1 class="shake-single">Trigger manual shake effect...</h1>

If desired, consider adding a class to the span elements and updating your CSS styles to provide more flexibility and separation between the elements and their containers.

const shake = (elementOrSelector) => {
  const element = typeof elementOrSelector === 'string'
    ? document.querySelector(elementOrSelector)
    : elementOrSelector;
  const text = element.textContent;
  element.textContent = '';
  element.innerHTML = text.split('').reduce((html, c, i) =>
    (html + `<span class="shaker" style="--n:${10 * i - 10000}ms;">${c}</span>`), '');
};

const shakeAll = () => {
  document.querySelectorAll('.shake').forEach(shake);
}

shakeAll(); // Shake all elements

shake('.shake-single'); // Trigger the shake effect manually

@keyframes wave {
  0%   { top:  0px; }
  25%  { top: -4px; }
  50%  { top:  0px; }
  75%  { top:  4px; }
  100% { top:  0px; }
}

.shaker {
  animation-delay: var(--n);
  animation: wave 2s linear var(--n) infinite forwards running;
  position: relative;
}

<h1 class="shake">This text will shake...</h1>

<h2>...while this text will remain still...</h2>

<h1 class="shake">...but this one will shake.</h1>

<h1 class="shake-single">Trigger the shake effect manually...</h1>

What is the process for animating classes instead of ids in CSS?

Answer №1

Similar questions

After clicking multiple times within the modal, the modal popup begins to shift towards the left side

Modifying an onClick handler function within a react element located in a node module, which points to a function in a prop declared in the main Component file

Retrieve information from the database upon clicking the submit button

Is there a way to align my green button beside the red button instead of below it?

Ways to avoid data looping in jQuery Ajax requests

Adding data to a URL using jQuery Ajax

What could be the reason for the status OVER_QUERY_LIMIT appearing before Status.OK in the Google Maps API response

Analyzing JavaScript code coverage through unit testing with Jenkins and SonarQube

Exploring the seamless integration of Material UI slider with chart js

AngularJS - Determine the correct condition or make a choice from the available options

What is the method for retrieving a value from my Node.js module once it has been modified by an asynchronous function?

The ejs file is failing to load the css file

Understanding the sequence of operations in Javascript using setTimeout()

The npm start command is no longer functioning in Angular 5

Having trouble accessing object properties fetched via API, receiving the error message "TypeError: Cannot read property '' of undefined" in Next.js with JavaScript

Exploring the Bounds of Mongodb's $within Query

What other option can be used in place of white-space:nowrap?

Determine whether a component is linked to an event listener

Excessive form inputs extend beyond the modal when utilizing Bootstrap 3

Building React Typescript Components with Froala Editor Plugins