Wie implementiert man Seitenscroll-Animationseffekte in CSS3?
Freigeben: 2018-08-06 14:32:17
Original
4651 Leute haben es durchsucht
本篇文章主要介绍css3实现页面滚动动画特效。那么我们首页要认识一下,什么是AOS?AOS 是一个用于在页面滚动的时候呈现元素动画的工具库,你可能会觉得它和
WOWJS 一样,虽然他们的效果类似,但是AOS是 CSS3 动画驱动的库,当你滚动页面的时候能让元素动起来,当页面滚回顶部的时候,元素能够回到前一个状态,如此达到循环动画的效果。aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件。希望本文介绍对大家有所帮助。

css3实现页面滚动动画特效具体代码示例如下:
首先要在页面中引入aos.css文件,jquery和aos.js文件
1 2 3 | <link rel= "stylesheet" href= "aos.css" />
<script src= "jquery.min.js" >
</script><script src= "aos.js" ></script>
|
Nach dem Login kopieren
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <body aos-easing= "ease-out-back" aos-duration= "1000" aos-delay= "0" >
<header class = "hero" >
<div class = "hero-center" >
<h1 style= "font-family:Microsoft YaHei" >页面滚动元素动画插件-aos.js</h1>
<h2 class = "hero__text aos-init" aos= "fade-up" aos-easing= "ease" aos-delay= "400" >Animate On Scroll <span>Library</span></h2>
</div>
<span class = "hero__scroll aos-init" aos= "fade-up" aos-easing= "ease" aos-delay= "800" >
Scroll down <br>
<i class = "chevron bottom" ></i>
</span>
</header>
<section class = "section section--code" >
<div class = "container" >
<h2 class = "section-title" >Fade</h2>
<div class = "code code--small code--left aos-init" aos= "fade-up" >
<pre class = "brush:php;toolbar:false" ><code class = "html" ><div aos= "fade-up" ></div></code>
|
Nach dem Login kopieren
1 | <code><div aos= "fade-down" ></div></code>
|
Nach dem Login kopieren
1 | <code><div aos= "fade-right" ></div></code>
|
Nach dem Login kopieren
1 | <code><div aos= "fade-left" ></div></code>
|
Nach dem Login kopieren
1 | <code><div aos= "fade-up-right" ></div></code>
|
Nach dem Login kopieren
1 | <code><div aos= "fade-up-left" ></div></code>
|
Nach dem Login kopieren
1 | <code><div aos= "fade-down-right" ></div></code>
|
Nach dem Login kopieren
1 | <code><div aos= "fade-down-left" ></div></code>
|
Nach dem Login kopieren
Flip
1 | <code><div aos= "flip-left" ></div></code>
|
Nach dem Login kopieren
1 | <code><div aos= "flip-right" ></div></code>
|
Nach dem Login kopieren
1 | <code><div aos= "flip-up" ></div></code>
|
Nach dem Login kopieren
1 | <code><div aos= "flip-down" ></div></code>
|
Nach dem Login kopieren
Zoom
1 | <code><div aos= "zoom-in" ></div></code>
|
Nach dem Login kopieren
1 | <code><div aos= "zoom-in-up" ></div></code>
|
Nach dem Login kopieren
1 | <code><div aos= "zoom-in-down" ></div></code>
|
Nach dem Login kopieren
1 | <code><div aos= "zoom-in-left" ></div></code>
|
Nach dem Login kopieren
1 | <code><div aos= "zoom-in-right" ></div></code>
|
Nach dem Login kopieren
1 | <code><div aos= "zoom-out" ></div></code>
|
Nach dem Login kopieren
1 | <code><div aos= "zoom-out-up" ></div></code>
|
Nach dem Login kopieren
1 | <code><div aos= "zoom-out-down" ></div></code>
|
Nach dem Login kopieren
1 | <code><div aos= "zoom-out-right" ></div></code>
|
Nach dem Login kopieren
1 | <code><div aos= "zoom-out-left" ></div></code>
|
Nach dem Login kopieren
Different settings examples
1 2 3 | <code><div aos= "fade-up"
aos-duration= "3000" >
</div></code>
|
Nach dem Login kopieren
1 2 3 4 | <code><div aos= "fade-down"
aos-easing= "linear"
aos-duration= "1500" >
</div></code>
|
Nach dem Login kopieren
1 2 3 4 | <code><div aos= "fade-right"
aos-offset= "300"
aos-easing= "ease-in-sine" >
</div></code>
|
Nach dem Login kopieren
1 2 3 4 5 | <code><div aos= "fade-left"
aos-anchor= "#example-anchor"
aos-offset= "500"
aos-duration= "500" >
</div></code>
|
Nach dem Login kopieren
1 2 3 4 5 | <code><div aos= "fade-zoom-in"
aos-easing= "ease-in-back"
aos-delay= "300"
aos-offset= "0" >
</div></code>
|
Nach dem Login kopieren
1 2 3 4 | <code><div aos= "flip-left"
aos-easing= "ease-out-cubic"
aos-duration= "2000" >
</div></code>
|
Nach dem Login kopieren
Anchor placement
1 2 3 | <code><div aos= "fade-up"
aos-anchor-placement= "top-bottom" >
</div></code>
|
Nach dem Login kopieren
1 2 3 | <code><div aos= "fade-up"
aos-anchor-placement= "center-bottom" >
</div></code>
|
Nach dem Login kopieren
1 2 3 | <code><div aos= "fade-up"
aos-anchor-placement= "bottom-bottom" >
</div></code>
|
Nach dem Login kopieren
1 2 3 | <code><div aos= "fade-up"
aos-anchor-placement= "top-center" >
</div></code>
|
Nach dem Login kopieren
1 2 3 | <code><div aos= "fade-up"
aos-anchor-placement= "center-center" >
</div></code>
|
Nach dem Login kopieren
1 2 3 | <code><div aos= "fade-up"
aos-anchor-placement= "bottom-center" >
</div></code>
|
Nach dem Login kopieren
<script>
$('.hero__scroll').on('click', function(e) {
$('html, body').animate({
scrollTop: $(window).height()
}, 1200);
});
</script>
Das obige ist der detaillierte Inhalt vonWie implementiert man Seitenscroll-Animationseffekte in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!