css3 aos,css3页面滚动aos.js插件元素动画

特效描述：css3页面滚动 aos.js插件 元素动画。css3页面滚动aos.js插件元素动画

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

页面滚动元素动画插件-aos.js

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>

AOS.init({

easing: 'ease-out-back',

duration: 1000

});

$('.hero__scroll').on('click', function(e) {

$('html, body').animate({

scrollTop: $(window).height()

}, 1200);

});