武汉官网建设:如何使用免费的AOS库轻松动画网页元素

发布时间2020-03-08    阅读:316    作者:武汉网站设计开发公司

滚动动画可以给你的网站增添相当的效果。一个小的动画波兰可以让你的网站看起来很圆完整。用JavaScript和CSS,你可以让元素消失,滑动,甚至旋转,就像你出现的时候一样。向下滚动一页

你甚至不用自己去编码它!感谢自由图书馆年代美化你的网站就像添加一个脚本一样简单。只要使用一个CDN或一个包管理器来安装JavaScript和CSS文件,并插入几行代码,那么制作动画就很简单了。

我们武汉官网建设将向您展示如何在这里设置AOS库,再加上一些AOS实验中的一些令人敬畏的例子。

设置AOS

如果你使用的是一个CDN或包管理器,安装AOS到你的站点是一个简单的过程,它为你提供所有的文件并正确地安装它们。如果你不想这样做,你需要下载文件自己动手

使用包管理器,您需要做的就是将代码输入到您安装的服务器的命令行/终端中。NPM是一种流行的解决方案,它也会自动与Node.js捆绑在一起。

npm install --save aos@next

还有凉亭它需要NPM。虽然它是一个废弃的工具,但它仍然被许多人使用。如果你安装了它,启动这个脚本:

bower install aos --save

最后,有这是Bower的一个流行的替代品,这是你需要的代码:

yarn add aos@next

如果您喜欢使用CDN,这些脚本将安装您需要启动的文件和样式表。请务必将两者都包含起来,否则将无法正常工作。

CSS脚本:

<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">

JS脚本:

<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>

无论使用哪种方法,最后一步是用这个代码初始化AOS并完成安装过程:

<script>
AOS.init();
</script>

那么这只是一个创建动画的问题!退房这张桌子动画控件,以及这些预定义动画你可以使用。由你来设计适合你独特网站的完美效果。如果你被卡住了,试试这个。深入教程开发人员写的。它有很多有用的例子。

AOS实验及实例

学习一个新的图书馆的最好方法是在行动中看到代码,这就是为什么像科特森这样的网站是如此有价值的。看看下面的代码片段,你就可以看到在输出旁边的AOS JavaScript了。你甚至可以实时地调整代码。然后使用你获得的知识来构建你自己的令人敬畏的动画。

模型

滚动库上的AOS动画

AOS – animations

锚定

锚锚定位

自定义动画

动画实例滚动实例-禁用动画

AOS JS

电影

滚动效果很容易

感谢像AOS这样的JavaScript库,创建漂亮动画的网站并不是什么大不了的事。学习图书馆的进进出出可能需要一点时间,尤其是如果你是初学者,但它会让整个Web开发人员更容易访问整个过程。这意味着你不必从头开始创建它。

武汉官网建设如果你在寻找一个优雅的图书馆滚动效果要实现的微风,一定要考虑AOS。它安装简单,甚至更容易学习,所以你可以在滚动动画上运行并在一个单元中运行。


QQ客服
胡经理