前端新手求教：如何实现类似Glint网站的文字向上入场动画？

Hey there! Great question—this slide-up text animation is a classic way to add subtle, engaging motion to your site, and it’s totally accessible even for frontend newcomers. Let’s walk through two approaches: a basic CSS-only version, and a more advanced scroll-triggered one that matches the behavior you’re seeing.

1. Basic CSS-Only Slide-Up Animation #

This version plays the animation as soon as the page loads. Perfect for hero text or elements that are visible right away.

HTML Structure #

First, wrap your text in a container (we’ll use a class to target it):

<div class="slide-up-text">
  <h1>Your Awesome Heading</h1>
  <p>Some descriptive text that slides up from below.</p>
</div>

CSS Code #

We’ll use CSS keyframes to define the animation, and style the element to start off-screen:

/* Hide the text initially and set up the animation */
.slide-up-text {
  opacity: 0;
  transform: translateY(100%); /* Push text down by its full height */
  animation: slideUp 0.8s ease forwards; /* Forwards keeps the final state */
  /* Optional: Add a delay if you want multiple elements to animate in sequence */
  /* animation-delay: 0.2s; */
}

/* Define the slide-up animation */
@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0); /* Move text back to original position */
  }
}

How It Works #

• transform: translateY(100%) moves the text down by its own height, so it’s hidden below its normal position.
• opacity: 0 makes it fully transparent initially.
• The slideUp keyframe animates both properties to their normal states, and forwards ensures the element stays in the final animated state instead of resetting.

2. Scroll-Triggered Animation (More Like the Example Site) #

Most sites trigger this animation only when the text enters the user’s viewport (so it doesn’t play if the user never scrolls down to it). Here’s how to do that with a bit of JavaScript:

Updated HTML #

We’ll use a base class for styling, and add an is-animated class to trigger the animation:

<div class="slide-up-text">
  <h1>Scroll Down to See Me Animate!</h1>
</div>

CSS Adjustments #

Remove the animation property from the base class, and add it to the is-animated class:

.slide-up-text {
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.8s ease; /* Use transition instead of keyframes here */
}

.slide-up-text.is-animated {
  opacity: 1;
  transform: translateY(0);
}

JavaScript to Detect Viewport #

This script checks if the element is visible in the viewport, then adds the is-animated class:

// Function to check if element is in viewport
function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  return (
    rect.top <= window.innerHeight &&
    rect.bottom >= 0
  );
}

// Function to handle scroll events
function handleScroll() {
  const slideElements = document.querySelectorAll('.slide-up-text');
  
  slideElements.forEach(element => {
    if (isInViewport(element) && !element.classList.contains('is-animated')) {
      element.classList.add('is-animated');
    }
  });
}

// Run on page load in case elements are already visible
window.addEventListener('load', handleScroll);
// Run on scroll
window.addEventListener('scroll', handleScroll);

Bonus: Optimize Performance #

To prevent the scroll event from firing too often, you can add a throttle function. Here’s a simple one:

function throttle(func, delay = 100) {
  let lastCall = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastCall >= delay) {
      lastCall = now;
      func(...args);
    }
  };
}

// Replace the scroll listener with the throttled version
window.addEventListener('scroll', throttle(handleScroll));

Final Tips #

• Adjust the 0.8s duration in CSS to make the animation faster or slower.
• Change ease to ease-in-out or linear for different animation curves.
• For multiple elements, add staggered animation-delay values (in the CSS-only version) or adjust the JavaScript to trigger them in sequence.

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