zoukankan      html  css  js  c++  java
  • Js 之aos.js页面滚动动画

    下载:https://codeload.github.com/michalsnik/aos/zip/master

    1、引入

    <link rel="stylesheet" href="dist/aos.css" />
    <script src="js/jquery.min.js"></script>
    <script src="dist/aos.js"></script>

    2、属性

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

    如果你不想单独每个元素做一个动画配置,你可以通过init()方法来统一配置所有元素的动画效果。

    AOS.init({  easing: 'ease-out-back', duration: 600, });

    3、动画

    淡入淡出动画:

    • 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
  • 相关阅读:
    Git回退---reset和revert
    XML解析
    SpringBoot学习day01
    Spring boot精要
    JS没有contains方法,可以用indexof实现
    git fetch 取回所有分支(branch)的更新(转)
    idea 设置注释模板
    git退出编辑模式
    git 提交代码到远程分支
    linux下,保存退出vim编辑器(转)
  • 原文地址:https://www.cnblogs.com/yang-2018/p/14889075.html
Copyright © 2011-2022 走看看