zoukankan      html  css  js  c++  java
  • 一款很好用的页面滚动元素动画插件-AOS.JS

    aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件。该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果。在页面往回滚动时,元素会恢复到原来的状态。

    加载方法:

    <link rel="stylesheet" href="/dist/aos.css" />
    <script src="/dist/aos.js"></script>
    <script>
      AOS.init();
    </script>

    (JS、CSS文件加载路径自己调配,每个人情况不同。)

    元素上可以添加以下属性:(这里以DIV为例)

    属性 描述 示例值 默认值
    data-aos-offset 是立刻触发动画还是在指定时间之后触发动画 200 120
    data-aos-duration 动画持续时间 600  400
    data-aos-easing 动画的easing动画效果 300 0
    data-aos-delay 动画的延迟时间 300 0
    data-aos-anchor 锚元素。使用它的偏移来取代实际元素的偏移来触发动画 #selector null
    data-aos-anchor-placement 锚位置,触发动画时元素位于屏幕的位置 top-center top-bottom
    data-aos-once 动画是否只会触发一次,或者每次上下滚动都会触发 true false

    *注意,aos-duration的动画持续时间的范围从50-3000毫秒,如果你想设置更大的值,可以在页面中添加下面的CSS代码

    body[data-aos-duration='4000'] [data-aos], [data-aos][data-aos][data-aos-duration='4000']{
        transition-duration: 4000ms;
    }
    

    上面的代码将动画的持续时间修改为4000毫秒。

    数据 AOS 锚的位置,你可以为每一个元素设置不同的配置选项,原理很简单,每个锚放置的选项包含两个位置,即顶和中心。这意味着,动画将被触发时,顶部的元素将达到中心的窗口。底部顶部意味着动画将被触发时,底部的一个元素到达顶部的窗口,等等。下面你可以找到所有的锚定位置选项列表。

    动画:

    淡入淡出动画:
    fade-up
    fade-down
    fade-left
    fade-right
    fade-up-right
    fade-up-left
    fade-down-right
    fade-down-left


    翻转动画:
    flip-up
    flip-down
    flip-left
    flip-right


    滑动动画:
    slide-up
    slide-down
    slide-left
    slide-right


    缩放动画:
    zoom-in
    zoom-in-up
    zoom-in-down
    zoom-in-left
    zoom-in-right
    zoom-out
    zoom-out-up
    zoom-out-down
    zoom-out-left
    zoom-out-right


    锚位置:
    top-bottom
    top-center
    top-top
    center-bottom
    center-center
    center-top
    bottom-bottom
    bottom-center
    bottom-top

    easing动画:

    你可以使用以下的一些easing动画效果:

    linear
    ease
    ease-in
    ease-out
    ease-in-out
    ease-in-back
    ease-out-back
    ease-in-out-back
    ease-in-sine
    ease-out-sine
    ease-in-out-sine
    ease-in-quad
    ease-out-quad
    ease-in-out-quad
    ease-in-cubic
    ease-out-cubic
    ease-in-out-cubic
    ease-in-quart
    ease-out-quart
    ease-in-out-quart

    一些样例代码:

    <div data-aos="fade-zoom-in" data-aos-offset="200" data-aos-easing="ease-in-sine" data-aos-duration="600">
    
    <div data-aos="flip-left" data-aos-delay="100" data-aos-anchor=".example-selector">
    
    <div data-aos="fade-up" data-aos-anchor-placement="top-center">
    

      

    AOS对象为一个全局变量,有很多种核心API可以使用。这里不多叙述,有需要的朋友去下面官方github或其他博客查询。

    附:官方AOS Github(点击跳转) 所需下载文件、demo作者也打包在内.

  • 相关阅读:
    洛谷p1017 进制转换(2000noip提高组)
    Personal Training of RDC
    XVIII Open Cup named after E.V. Pankratiev. Grand Prix of Eurasia
    XVIII Open Cup named after E.V. Pankratiev. Grand Prix of Peterhof.
    Asia Hong Kong Regional Contest 2019
    XVIII Open Cup named after E.V. Pankratiev. Grand Prix of Siberia
    XVIII Open Cup named after E.V. Pankratiev. Ukrainian Grand Prix.
    XVIII Open Cup named after E.V. Pankratiev. GP of SPb
    卜题仓库
    2014 ACM-ICPC Vietnam National First Round
  • 原文地址:https://www.cnblogs.com/phper12580/p/9903185.html
Copyright © 2011-2022 走看看