滚动时为对象添加动画效果

最近我做一个项目，想添加一张图片，当页面上下滚动时，这张图片会旋转。经过一番研究，我发现有很多方法可以实现这个功能：纯 CSS、使用 JavaScript、使用库等等。

本简短教程将重点介绍添加动画滚动条的简便方法。如果您正在构建小型网站或项目并希望添加动画滚动条：

这里真是个好地方！

（对于大型项目，我建议查看其他教程以获得更优化的解决方案）。

设置您的对象

我们需要设置对象。它可以是普通的图像：从图标到矢量图形都可以。我建议使用矢量图形，因为它们易于编辑（如果您需要的话），或者使用 PNG 格式以支持透明度。

为了方便使用和清晰展示，我们将对象放在一个 div 标签内，并将其放置在 HTML 代码中（通常位于顶部）。

<div id="scrollContainer">
  <img src="../../../public/img/scrollObject.svg" alt="scrollObject" id="scrollObject">
</div>

我们可以添加任意数量的对象，但为了简单起见，我们将只使用这一个对象。

定位

那么，我们应该把对象放在哪里呢？这通常取决于对象的目标。我们希望它实现什么功能？

• 右下角有一个很小的、不显眼的图标。
• 滚动位置指示器
• 一段精美的动画
• 吸引游客眼球的重要标志
• ...

我们只想在滚动时添加一个简短有趣的动画效果，所以将其放在页面右下角比较合适。
我们在 CSS 中编写了以下样式：

#scrollObject{
  position: fixed;
  right: 3vw;
  bottom: 3vh;
  top: auto;
  width: 7vh;
  height: auto;
  transition: 0.1s ease-out;

我们主要的目标是让对象在滚动时保持固定位置，因此我们添加了 `position: fixed`；
其他一些属性包括 `right`、`top`、`bottom` 等。我们使用这些属性来定位对象，并为其边缘留出一些空间/边距。您可以根据需要调整这些属性，直到达到您项目所需的理想位置。

我们使用视口单位（视口高度和视口宽度）来保持对象的响应式设计。这一点您始终需要牢记。

动画片

最后，我们希望为对象添加动画效果。一些简单漂亮的动画可以通过 CSS 实现，但我们希望对象能够根据滚动操作而移动。为此，我们将添加一段非常简短的 JavaScript 代码。

let scrollObject = document.getElementById("scrollObject");
window.addEventListener("scroll", () => {   
scrollObject.style.transform="rotate("`${window.pageYOffset}`"deg)";
});

您可以将其包含在链接的 JS 文件中，或者如果您正在构建一些小型程序，请将其包含在 html 页面底部的 script 标签中。

查看结果以检查动画效果。如果您想减慢（或加快）动画速度，可以将其包含在一个简单的数学表达式中。您可以将其包含在旋转函数中，或者创建一个单独的变量来存储速度，以便将此速度应用于更多对象，如下所示：

let scrollSpeed = window.pageYOffset / 2;
let scrollObject = document.getElementById("scrollObject");
window.addEventListener("scroll", () => {
scrollObject.style.transform="rotate("`${scrollSpeed}`"deg)";
});

我们还可以使用 `window.pageYOffset` 数据来调整或定义其他动画（例如，根据窗口位置更改显示的动画或图像）。如果您想快速上手，可以使用简单的 `console.log(windows.pageYOffset)` 来调用此数据。

好了，现在滚动时就能看到简单的动画图片了！额外福利：移动端也适用。 为了实现响应式设计，我决定改变滚动图标的位置，并让它替换导航栏中的图片，这样仍然可以展示这个漂亮的动画效果！

@media only screen and (max-width: 600px) {
  #scrollObject{
    transition: 0.2s ease-out;
    margin-left: -4vh;
    width: 8vh;
    height: auto;
    top: 10px;
    left: 50%;
  }

只需使用简单的媒体查询即可重新定位、调整大小……瞧！

您可能已经注意到我添加了过渡时间和缓动选项，这样可以使图像在从桌面屏幕切换到移动屏幕时平滑地出现和消失。

这导致以下结果：

如果你正在开发一个 Vue 项目（就像我一样）：尝试将其作为单独的组件包含进来。或者将其编写到 App.vue 文件中，因为你希望它始终显示在所有视图的最上方。