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

Is it possible to convert a DOM object into a JSON object for transfer?

What is the process for retrieving an HTML file dynamically and using it to populate a DIV with jQuery?

Displaying dynamic text using radio buttons utilizing React

Experiencing difficulty receiving a full response from an ajax-php request displayed in a div

Tips for setting extra field values in the CKEditor image dialog during editing

What are the best practices for utilizing pre-defined CSS classes in Vue.js libraries?

Submitting a form using jQuery and processing the response

Create a JavaScript function that continues to execute even after a button has been clicked

Using jQuery to Retrieve Accurate User Identification - Making AJAX Requests

Tips for creating multiple diagonal lines with CSS and HTML

Obtain an array containing only unique values from a combination of arrays

Using Bootstrap 4: How to maximize the width of a span element placed near a label

Leveraging Global SCSS Variables in Next.JS with SASS

Trouble with setting HTML table width

A beginner's guide to importing modules in Node.js

Is there a way to link code and unit testing directly to npm test?

When attempting to showcase array information in React, there seems to be an issue with the output

Mat-SideNav in Angular Material is not toggled by default

Retrieving Data using Map in ReactJS

Organize the array by property name and include a tally for each group