滚动屏幕时如何实现单个元素出现时单独显示而非批量显示

Got it, let's tweak your code so each .animate element shows up on its own when it scrolls into the viewport, instead of all appearing the moment the first one is visible. Here's the adjusted code and breakdown:

HTML (Example Structure) #

This assumes your existing markup has multiple elements with the animate class:

<div class="animate">First element</div>
<div class="animate">Second element</div>
<div class="animate">Third element</div>
<div class="animate">Fourth element (further down the page)</div>

CSS (Keep Your Base Styles, Just Confirm) #

Your initial hidden state and transition styles can stay the same—we just need to make sure we toggle the show class per element:

.animate {
  opacity: 0;
  transform: translateY(20px); /* Start slightly below */
  transition: opacity 0.6s ease, transform 0.6s ease;
  margin: 50px 0; /* Add spacing so elements scroll in one at a time */
}

.animate.show {
  opacity: 1;
  transform: translateY(0); /* Animate to original position */
}

Updated jQuery Code #

The key change is we'll check each element individually instead of targeting all when the first is visible:

$(document).ready(function() {
  // Helper function to check if a single element is in the viewport
  function isElementInViewport(el) {
    const rect = el.getBoundingClientRect();
    // Return true if any part of the element is within the viewport bounds
    return (
      rect.top <= window.innerHeight &&
      rect.bottom >= 0
    );
  }

  // Function to loop through all animate elements and toggle visibility
  function checkVisibleElements() {
    $('.animate').each(function() {
      // Only add the show class if the element is in view AND hasn't been shown yet
      if (isElementInViewport(this) && !$(this).hasClass('show')) {
        $(this).addClass('show');
      }
    });
  }

  // Check on page load (in case elements are already in view)
  checkVisibleElements();

  // Check on scroll—add throttle to avoid performance hits
  $(window).scroll(function() {
    checkVisibleElements();
  });
});

Key Changes Explained: #

• Per-element visibility check: The isElementInViewport function uses getBoundingClientRect() to check if the specific element is within the viewport, not just the first one.
• Loop through every element: Instead of targeting all .animate elements at once, we use .each() to iterate and handle each one individually.
• Prevent duplicate animations: We check if the element already has the show class before adding it, so it doesn't re-animate if the user scrolls back up and down.
• Initial load check: Runs checkVisibleElements() on page load so elements that start in the viewport don't stay hidden.

Optional Performance Optimization (Throttling) #

If you have lots of elements, adding a throttle to the scroll event will reduce how often the function runs, which helps with performance:

// Add this throttle function above your scroll handler
function throttle(func, delay) {
  let lastExecution = 0;
  return function() {
    const now = Date.now();
    if (now - lastExecution >= delay) {
      func.apply(this, arguments);
      lastExecution = now;
    }
  };
}

// Replace the scroll handler with this throttled version
$(window).scroll(throttle(checkVisibleElements, 100)); // Run every 100ms

Now each element will fade in smoothly as it scrolls into the viewport, one at a time!

内容的提问来源于stack exchange，提问作者Piotr Ciszewski