Question

所以我是一个非常基本的程序员。我大二的时候我在HS上了一门Web设计课程，而现在我只是一个初中生，试图为大学和其他课程创建一个个人网站。

其中之一是使用动画。我想使图片翻转或滚动滚动，并在网上寻找时找到了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链接，主体带有javascript链接，但是当我尝试启动AOS的使用时，该命令看起来像这样：

与普通ID中的data-aos部分不同，与调用id或class时不同。 dist文件夹作为视频状态在哪里？如何正确链接和使用AOS库中提供的这些命令？另外，我是否需要使用和了解我的小型个人网站上的纱线和鲍尔产品？

Answer 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粘贴到浏览器中，然后将内容保存在本地Web服务器文件夹中的aos.css和aos.js文件中。

之后，只需将它们包括在您的页面上即可（标题和js分别位于正文和末尾的结尾处，瞧，您就可以开始使用。添加具有所需过渡效果的元素并享受其中吧！

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

1 个答案: