css上下滚动页面有动画效果图

CSS 上下滚动页面有动画效果图是一种非常流行的技术，很多网站都使用这种效果来吸引用户的眼球。本文将介绍如何使用 CSS 创建一个具有动画效果的上下滚动页面。

html {
    scroll-behavior: smooth;
}
body {
    height: 2000px;
}
section {
    height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    color: white;
}
section:nth-child(even) {
    background-color: #43a047;
}
section:nth-child(odd) {
    background-color: #fb8c00;
}
section h1 {
    margin: 0;
}
section p {
    margin-top: 20px;
    font-size: 30px;
}

首先，在 html 上设置 scroll-behavior: smooth; 属性能够为页面的滚动添加平滑的过渡效果。在 body 中设置一个高度大于视窗高度的值，这是为了方便我们在页面上进行滚动。接下来，创建多个 section 元素，它们会被垂直地放置在页面上。我们使用 Flexbox 技术来让 section 元素垂直居中，并在其中使用一些简单的样式来进一步美化页面。

现在，使用一些简单的 JavaScript 代码，我们就能为页面上的每个 section 元素添加一个动画。这里我们使用了 IntersectionObserver API 来检查 section 元素是否进入到了视窗中。一旦某个 section 元素在视窗中可见，我们就会添加一个新的 CSS 类名到该元素上，从而触发上下滚动动画效果：

const sections = document.querySelectorAll('section');

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('active');
      } else {
        entry.target.classList.remove('active');
      }
    });
  },
  { threshold: 0.5 }
);

sections.forEach((section) => {
  observer.observe(section);
});

现在，我们的页面已经可以以动画的方式进行上下滚动了。当用户滚动页面时，如果某个 section 元素进入到视窗中，那么它就会以动画的方式滑入到视窗中心。这种效果非常简单易用，并且可以为网站带来视觉上的吸引力。