jQuery页面滚动元素展现隐藏动画插件DEMO演示 -JS/jQuery代码 -演示与下载 -时代Java

aos.js-超赞页面滚动元素动画jQuery动画库

Animate On Scroll Library

Scroll down

Fade

<div aos="fade-up"></div>
<div aos="fade-down"></div>
<div aos="fade-right"></div>
<div aos="fade-left"></div>
<div aos="fade-up-right"></div>
<div aos="fade-up-left"></div>
<div aos="fade-down-right"></div>
<div aos="fade-down-left"></div>

Flip

<div aos="flip-left"></div>
<div aos="flip-right"></div>
<div aos="flip-up"></div>
<div aos="flip-down"></div>

Zoom

<div aos="zoom-in"></div>
<div aos="zoom-in-up"></div>
<div aos="zoom-in-down"></div>
<div aos="zoom-in-left"></div>
<div aos="zoom-in-right"></div>
<div aos="zoom-out"></div>
<div aos="zoom-out-up"></div>
<div aos="zoom-out-down"></div>
<div aos="zoom-out-right"></div>
<div aos="zoom-out-left"></div>

Different settings examples

<div aos="fade-up"
     aos-duration="3000">
</div>
<div aos="fade-down"
     aos-easing="linear"
     aos-duration="1500">
</div>
<div aos="fade-right"
     aos-offset="300"
     aos-easing="ease-in-sine">
</div>
<div aos="fade-left"
     aos-anchor="#example-anchor"
     aos-offset="500"
     aos-duration="500">
</div>
<div aos="fade-zoom-in"
     aos-easing="ease-in-back"
     aos-delay="300"
     aos-offset="0">
</div>
<div aos="flip-left"
     aos-easing="ease-out-cubic"
     aos-duration="2000">
</div>

Anchor placement

<div aos="fade-up"
     aos-anchor-placement="top-bottom">
</div>
<div aos="fade-up"
     aos-anchor-placement="center-bottom">
</div>
<div aos="fade-up"
     aos-anchor-placement="bottom-bottom">
</div>
<div aos="fade-up"
     aos-anchor-placement="top-center">
</div>
<div aos="fade-up"
     aos-anchor-placement="center-center">
</div>
<div aos="fade-up"
     aos-anchor-placement="bottom-center">
</div>
下载代码说明
X关闭

jQuery页面滚动元素展现隐藏动画插件

本代码一款超炫酷的jQuery动画插件,这款插件实现的功能是当页面向下滚动时,页面中的指定元素会以各种动画的方式展现出来,当页面向上滚动时,元素则会以各种动画方式隐藏。也就是说页面元素会随着可视范围的变化而出现展现隐藏的动画效果。本段代码兼容目前最新的各类主流浏览器,适用浏览器:搜狗、360、FireFox、Chrome、Safari、Opera、傲游、世界之窗,不支持IE8及以下浏览器。是一款