如何用jQuery触发CSS @keyframes滚动动画及相关布局问题咨询

Hey there! Let's tackle each of your jQuery scroll animation issues one by one—they're all solvable with a few tweaks to your code.

1. Trigger Animation When Scrolling to 1/4 of a Section #

To fire the animation when you've scrolled to the 25% mark of your target section, you'll need to calculate that exact trigger point in your scroll listener. Here's how to do it:

$(window).scroll(function() {
  // Replace '.target-section' with your actual section selector
  const $targetSection = $('.target-section');
  const sectionTop = $targetSection.offset().top;
  const sectionHeight = $targetSection.outerHeight();
  // Calculate 1/4 down from the top of the section
  const triggerPosition = sectionTop + (sectionHeight / 4);
  // Get the current bottom edge of the viewport
  const viewportBottom = $(window).scrollTop() + $(window).height();

  // If the viewport has passed the trigger point, start the animation
  if (viewportBottom >= triggerPosition) {
    $('.box').addClass('animate');
  }
});

This code checks where the bottom of your browser window is relative to the section's 1/4 point. Once you scroll past that spot, it adds an animate class to your boxes (you'll define the animation in CSS tied to this class).

2. Fix Vertical Centering After Adding @keyframes #

The issue with your box losing centering likely comes from your animation overriding the transform property that keeps it centered. Here's how to fix it:

First, make sure your base .box style includes proper vertical centering. For example, using absolute positioning:

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  /* This keeps it centered initially */
  transform: translate(-50%, -50%);
  opacity: 0; /* Start hidden for animation */
}

Then, when writing your @keyframes, include the centering translate(-50%, -50%) in every keyframe so it doesn't get lost:

@keyframes slideIn {
  0% {
    opacity: 0;
    /* Combine centering transform with animation transform */
    transform: translate(-50%, -50%) translateY(30px);
  }
  100% {
    opacity: 1;
    /* Keep centering transform here too */
    transform: translate(-50%, -50%) translateY(0);
  }
}

.box.animate {
  animation: slideIn 0.7s ease forwards;
}

By keeping translate(-50%, -50%) in both keyframes, the box stays centered even when animation-fill-mode: forwards is applied. If you remove forwards, the animation would reset to the base style—but since the base style includes centering, it would snap back to center instead of the top.

3. Adding Animation to Boxes When Scroll Starts #

Absolutely! You can trigger the animation as soon as the user starts scrolling, and ensure it only runs once. Here's a simple implementation:

// Track if the animation has already run
let animationTriggered = false;

$(window).scroll(function() {
  if (!animationTriggered) {
    // Add animation class to both boxes
    $('.box').addClass('animate');
    // Prevent the animation from running again
    animationTriggered = true;
  }
});

If you want to wait until the user has scrolled a small distance (like 50px) before triggering, adjust it like this:

let animationTriggered = false;

$(window).scroll(function() {
  const scrollDistance = $(window).scrollTop();
  // Trigger after scrolling 50px down
  if (scrollDistance > 50 && !animationTriggered) {
    $('.box').addClass('animate');
    animationTriggered = true;
  }
});

This way, the animation only fires once when scrolling begins, instead of repeatedly on every scroll event.

内容的提问来源于stack exchange，提问作者Marius Gardelli