网页实现滚动显隐动画的示例讲解

red润

于 2024-09-10 11:32:19 发布

阅读量180

点赞数 1

分类专栏：经验文章标签：前端 javascript css3

本文链接：https://blog.csdn.net/qq_47658204/article/details/142094450

版权

经验专栏收录该内容

14 篇文章 2 订阅

订阅专栏

网页实现滚动显隐动画的简单示例

请添加图片描述

在现代网页设计中，滚动动画可以极大地提升用户体验。本文将介绍一个简单的实现滚动显隐动画的示例，帮助你为网页中的元素添加优雅的进入动画效果。

HTML 结构

在 index.html 文件中，我们首先定义了一个包含多个元素的简单网页布局。这些元素将会在用户滚动页面时逐步显现出来。以下是我们的基本 HTML 结构：

htmlCopy Code
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>显隐动画</title>
    <link rel="stylesheet" href="styles.css?v=1.0" />
    <style>
      div {
        height: 50vh;
        background-color: blue;
        text-align: center;
        font-size: 40px;
        line-height: 50vh;
      }
      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .hidden {
        opacity: 0;
        transform: translateY(20px);
      }
      .visible {
        animation: fadeIn 1s forwards;
      }
    </style>
</head>
<body>
    <div style="background-color: red">滚动以查看动画</div>
    <div class="fade-in hidden">这是一个将会显影的元素1。</div>
    <div class="fade-in hidden">这是一个将会显影的元素2。</div>
    <div class="fade-in hidden">这是一个将会显影的元素3。</div>
    <div class="fade-in hidden">这是一个将会显影的元素4。</div>
    <div class="fade-in hidden">这是一个将会显影的元素5。</div>
    <div class="fade-in hidden">这是一个将会显影的元素6。</div>
    <div class="fade-in hidden">这是一个将会显影的元素7。</div>
    <div style="background-color: yellow">更多内容</div>
    <script>
      document.addEventListener('DOMContentLoaded', () => { // 选择所有带有 fade-in 类的元素 
          // 选择所有带有 fade-in 类的元素
        const elements = document.querySelectorAll('.fade-in');

        const options = {
            root: null, // 使用 viewport 作为根
            rootMargin: '0px',
            threshold: 0.1 // 元素至少 10% 进入视口时触发
        };

        const observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    // 为进入视口的元素添加 visible 类
                    entry.target.classList.add('visible');
                    // 观察到元素后停止观察
                    observer.unobserve(entry.target);
                }
            });
        }, options);

        elements.forEach(element => {
            observer.observe(element); // 观察每个元素
        });
      }
    </script>
</body>
</html>

CSS 动画

在 <style> 标签中，我们定义了一个名为 fadeIn 的动画，它将元素从不可见过渡到完全可见。动画通过逐渐改变元素的 opacity 和 transform 属性来实现显影效果：

cssCopy Code
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hidden {
  opacity: 0;
  transform: translateY(20px);
}

.visible {
  animation: fadeIn 1s forwards;
}

JavaScript 逻辑

在 <script> 标签中，我们使用了 IntersectionObserver API 来检测元素何时进入视口。一旦元素进入视口，我们会为其添加 visible 类，从而触发动画。以下是主要的 JavaScript 代码：

javascriptCopy Code
document.addEventListener('DOMContentLoaded', () => {
      // 选择所有带有 fade-in 类的元素
    const elements = document.querySelectorAll('.fade-in');

    const options = {
        root: null, // 使用 viewport 作为根
        rootMargin: '0px',
        threshold: 0.1 // 元素至少 10% 进入视口时触发
    };

    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                // 为进入视口的元素添加 visible 类
                entry.target.classList.add('visible');
                // 观察到元素后停止观察
                observer.unobserve(entry.target);
            }
        });
    }, options);

    elements.forEach(element => {
        observer.observe(element); // 观察每个元素
    });
});

总结

以上代码展示了如何通过 IntersectionObserver API 和 CSS 动画实现滚动显隐效果。这种技术可以有效地提升用户体验，使网页更具互动性和视觉吸引力。希望这个简单示例能帮助你更好地掌握滚动动画的实现方法。

red润

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
网页实现滚动显隐动画的示例讲解

API 和 CSS 动画实现滚动显隐效果。这种技术可以有效地提升用户体验，使网页更具互动性和视觉吸引力。希望这个简单示例能帮助你更好地掌握滚动动画的实现方法。在现代网页设计中，滚动动画可以极大地提升用户体验。本文将介绍一个简单的实现滚动显隐动画的示例，帮助你为网页中的元素添加优雅的进入动画效果。文件中，我们首先定义了一个包含多个元素的简单网页布局。这些元素将会在用户滚动页面时逐步显现出来。一旦元素进入视口，我们会为其添加。的动画，它将元素从不可见过渡到完全可见。标签中，我们定义了一个名为。
复制链接

扫一扫

专栏目录