css3aos,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>
js控制css3动画触发<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);
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。