基于jQuery实现滚动到段落时放大字体、离开时缩小的效果

Got it, your current code works for a fixed scroll position, but to make it trigger when a paragraph is near the viewport (and reset when it's far away), we need to check each paragraph's position relative to the window as the user scrolls. Here's a refined approach:

Step 1: Add Smooth Transition (Optional but Polished) #

First, add a CSS transition to make the font size change feel gradual instead of jarring:

.target-paragraph {
  font-size: 16px; /* Your default base size */
  transition: font-size 0.3s ease; /* Smooth animation between sizes */
}

Step 2: Updated JavaScript Code #

Replace your existing JS with this version. It detects when each paragraph enters a "trigger zone" (we’ll use 200px above/below the viewport as the threshold—feel free to tweak this number):

$(document).ready(function() {
  // How close the element needs to be to the viewport to trigger the effect
  const triggerDistance = 200;

  $(window).scroll(function() {
    // Loop through every paragraph we want to target
    $('.target-paragraph').each(function() {
      const elem = $(this)[0];
      const position = elem.getBoundingClientRect();
      
      // Check if the paragraph is within our trigger zone
      const isNearViewport = position.top < window.innerHeight + triggerDistance && 
                             position.bottom > -triggerDistance;

      if (isNearViewport) {
        // Enlarge font when the paragraph is near the viewport
        $(this).css('font-size', '20px');
      } else {
        // Shrink back to default when it's far away
        $(this).css('font-size', '16px');
      }
    });
  });

  // Trigger scroll on page load to set initial font sizes correctly
  $(window).scroll();
});

Key Breakdown: #

• getBoundingClientRect(): This gives us the paragraph’s exact position relative to the viewport, which is way more reliable than a fixed scroll pixel value.
• Trigger Distance: The 200px value means the effect kicks in when the paragraph is 200px above the bottom of the screen, and turns off when it’s 200px below the top. Adjust this to make the trigger happen earlier or later.
• Loop Through Elements: Using .each() lets you apply this effect to multiple paragraphs at once, not just a single element.
• Initial Scroll Trigger: Calling $(window).scroll() on load ensures the correct font size is applied immediately, no user scroll required.

Quick Customization Tips: #

• Swap $('.target-paragraph') for your actual paragraph selector (like p or a custom class name).
• Adjust the 20px (enlarged) and 16px (default) values to match your design.
• Change the 0.3s in the CSS transition to make the animation faster or slower.

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