Ways to create a sequential appearance of elements through CSS animations

Question

Ways to create a sequential appearance of elements through CSS animations

Can you help me achieve a wave effect for elements appearing one by one using CSS animation (jQuery)? Currently, all the elements show up at once and I want to create a wave-like motion. Any assistance would be greatly appreciated.

$(window).scroll(function() {
        $(".wave").each(function() {
          var position = $(this).offset().top;
          var winTop = $(window).scrollTop();
          if (position < winTop + 650) {
            $(this).addClass("slide-wave");
          }
        });
      });

.wave {
        visibility: hidden;
      }
      .slide-wave {
        animation: slide-one .4s;
        visibility: visible;
      }
      
      @keyframes slide-one {
        0% {
          opacity: 0;
          transform: translateY(80%);
        }
        100% {
          opacity: 1;
          transform: translateY(0%);
        }
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <div class="wave"></div>
      <div class="wave"></div>
      <div class="wave"></div>
      <div class="wave"></div>

javascript jquery css

Answer 1

Answer №1

In my recent project, I implemented a code snippet to add animation effects like flashing or popping to individual characters within a string. While this may not directly relate to your specific code, I can share the general approach I took in applying animations to a group of elements.

Here's an overview of what I did - firstly, I assigned a unique sequential ID to each character element in the string, similar to an array:

<p id="char-0">S</p>
<p id="char-1">t</p>
<p id="char-2">r</p>
<p id="char-3">i</p>
<p id="char-4">n</p>
<p id="char-5">g</p>

I created a function that takes a string as input and dynamically generates these <p> tags with the sequential IDs. Then, I developed a recursive function to iterate through all the elements, as shown below:

(Continue with the remaining content from the original text)

Answer 2

In my recent project, I implemented a code snippet to add animation effects like flashing or popping to individual characters within a string. While this may not directly relate to your specific code, I can share the general approach I took in applying animations to a group of elements.

Here's an overview of what I did - firstly, I assigned a unique sequential ID to each character element in the string, similar to an array:

<p id="char-0">S</p>
<p id="char-1">t</p>
<p id="char-2">r</p>
<p id="char-3">i</p>
<p id="char-4">n</p>
<p id="char-5">g</p>

I created a function that takes a string as input and dynamically generates these <p> tags with the sequential IDs. Then, I developed a recursive function to iterate through all the elements, as shown below:

(Continue with the remaining content from the original text)

Ways to create a sequential appearance of elements through CSS animations

Answer №1

Similar questions

Is there a way to modify the button's color upon clicking in a React application?

A collection of jQuery objects that consist of various DOM elements as their properties

What is the reason for the crossed out background image CSS in the Datatables header within Zurb Foundation 5.5.3?

Having trouble getting the Bootstrap toggle checkbox to function properly within Angular 2 components?

The functionality of data attributes in jquery mobile is not functioning correctly

Initiate a click event on an anchor element with the reference of "a href"

Maintain the fixed position of the Google Map <div> while allowing background <div>s to scroll

Utilizing SubHeaders in Material UI Select Menu for Enhanced Organization

How to utilize DefinePlugin in Webpack to pass NODE_ENV value

How can we display the data returned by a successful AJAX request

When a jQuery click event is triggered, the event.target will return the child element that was clicked within the

stop tabs from being visible during window reload

Troubleshooting HTML/JavaScript with JSP and JSTL: iPhone only displaying the first option in select dropdown, rather than the selected option

Error: Unable to use map function on users .. cannot perform mapping on functions

Adjusting the timeout value for axios does not produce any impact

Employing promises for retrieving ajax data

What is the best technique to position a div at the bottom of a container that has a height of 100

Difficulty with implementing CSS Sprites in a jQuery-driven menu

Is it possible to utilize an npm package in TypeScript without a d.ts definition file?

Obtain the content of a dynamic text input field from a nested directive