如何使用特殊的滚动效果？答案

【问题标题】：How to use special onscroll effects?如何使用特殊的滚动效果？
【发布时间】：2019-01-06 00:59:10
【问题描述】：

所以我是一个非常基础的编码员。我在 HS 的大二上了一门网页设计课，现在我是一名大三学生，只是想为大学和其他东西制作个人网站。

其中之一就是使用动画。我想让我的图片在滚动时翻转或滑入，我在网上查找时找到了 AOS 库。

http://michalsnik.github.io/aos/

我尝试学习，但 GitHub 和 Bower 和 Npn 或其他任何东西都让我感到困惑。我希望能够在我的网站上使用 AOS 库命令，但我对 javascript 几乎一无所知，因为我真正学到的只是 HTML 和 CSS。尽管我使用的是 Windows，但我还是尽力关注这个视频，因为它通常是相同的想法：

https://www.youtube.com/watch?v=5XriUcr-QT0

（跳到 0:34）我从 github 下载了 AOS zip，当我试图获取他称之为的 CSS 和 JS 表格或插件时，我什至找不到文件夹。我尝试按照 AOS 库网站在底部所说的方式链接表格，头部使用 CSS 链接 rel，正文中使用 javascript 链接，但是当我尝试开始使用 AOS 时，命令看起来像这样：

普通文本中的 data-aos 部分与调用 id 或类时不同。视频状态下的 dist 文件夹在哪里？如何正确链接和使用 AOS 库中提供的这些命令？另外，对于我的小型个人网站，我是否需要使用和理解任何 yarn 和 Bower？

【问题讨论】：

标签： javascript jquery html css scroll

【解决方案1】：

其实这很简单，你可以用我这里的例子……

https://jsfiddle.net/54cvqLy8/2/

这是代码

<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
</head>
<body style="float:left;width:50%">
<div class ="big-div" data-aos="fade-in">Hello!</div>
<div class ="big-div" data-aos="fade-right">Goodbye!</div>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init({
                easing: 'ease-out-back',
                duration: 2000 // this is the time the transistion takes to complete
            });
  </script>
</body>
</html>

以及要添加的样式

.big-div {
  float:left;
  background-color:red;
  width:100%;
  heigth:330px;
  padding-top:200px;
  padding-bottom:100px;
  text-align:center;
  color:yellow;
  font-size:28px;
  margin-bottom:300px;
}

您只需要在页面头部和正文中包含文件。

css 使用https://unpkg.com/aos@next/dist/aos.css，js 使用https://unpkg.com/aos@next/dist/aos.js

如果您想使用本地副本而不是远程副本，只需将 URL 粘贴到浏览器中，然后将内容保存在本地网络服务器文件夹中名为 aos.css 和 aos.js 的文件中。

之后，只需将它们包含在您的页面上（标题上的 css 和正文末尾的 js，瞧，您就可以开始了。添加具有所需过渡效果的元素并享受！

【讨论】：