以下是 css3页面滚动div元素动画特效 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css3页面滚动div元素动画特效 </title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" href="dist/aos.css" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<header class="hero">
<div class="hero-center">
<h1 style="font-family:Microsoft YaHei">页面滚动元素动画插件-aos.js</h1>
<h2 class="hero__text" aos="fade-up" aos-easing="ease" aos-delay="400">Animate On Scroll <span>Library</span></h2>
</div>
<span class="hero__scroll" 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="fade-up">
<pre><code class="html"><div aos="fade-up"></div></code></pre>
</div>
<div class="code code--small code--right" aos="fade-down">
<pre><code><div aos="fade-down"></div></code></pre>
</div>
<div class="code code--small code--left" aos="fade-right">
<pre><code><div aos="fade-right"></div></code></pre>
</div>
<div class="code code--small code--right" aos="fade-left">
<pre><code><div aos="fade-left"></div></code></pre>
</div>
<div class="code code--small code--left" aos="fade-up-right">
<pre><code><div aos="fade-up-right"></div></code></pre>
</div>
<div class="code code--small code--right" aos="fade-up-left">
<pre><code><div aos="fade-up-left"></div></code></pre>
</div>
<div class="code code--small code--left" aos="fade-down-right">
<pre><code><div aos="fade-down-right"></div></code></pre>
</div>
<div class="code code--small code--right" aos="fade-down-left">
<pre><code><div aos="fade-down-left"></div></code></pre>
</div>
</div>
</section>
<section class="section section--code">
<div class="container">
<h2 class="section-title">Flip</h2>
<div class="code code--small code--left" aos="flip-left">
<pre><code><div aos="flip-left"></div></code></pre>
</div>
<div class="code code--small code--right" aos="flip-right">
<pre><code><div aos="flip-right"></div></code></pre>
</div>
<div class="code code--small code--left" aos="flip-up">
<pre><code><div aos="flip-up"></div></code></pre>
</div>
<div class="code code--small code--right" aos="flip-down">
<pre><code><div aos="flip-down"></div></code></pre>
</div>
</div>
</section>
<section class="section section--code">
<div class="container">
<h2 class="section-title">Zoom</h2>
<div class="code code--small code--left" aos="zoom-in">
<pre><code><div aos="zoom-in"></div></code></pre>
</div>
<div class="code code--small code--right" aos="zoom-in-up">
<pre><code><div aos="zoom-in-up"></div></code></pre>
</div>
<div class="code code--small code--left" aos="zoom-in-down">
<pre><code><div aos="zoom-in-down"></div></code></pre>
</div>
<div class="code code--small code--right" aos="zoom-in-left">
<pre><code><div aos="zoom-in-left"></div></code></pre>
</div>
<div class="code code--small code--left" aos="zoom-in-right">
<pre><code><div aos="zoom-in-right"></div></code></pre>
</div>
<div class="code code--small code--right" aos="zoom-out">
<pre><code><div aos="zoom-out"></div></code></pre>
</div>
<div class="code code--small code--left" aos="zoom-out-up">
<pre><code><div aos="zoom-out-up"></div></code></pre>
</div>
<div class="code code--small code--right" aos="zoom-out-down">
<pre><code><div aos="zoom-out-down"></div></code></pre>
</div>
<div class="code code--small code--left" aos="zoom-out-right">
<pre><code><div aos="zoom-out-right"></div></code></pre>
</div>
<div class="code code--small code--right" aos="zoom-out-left">
<pre><code><div aos="zoom-out-left"></div></code></pre>
</div>
</div>
</section>
<section class="section section--code">
<div class="container">
<h2 class="section-title">Different settings examples</h2>
<div class="code code--left" aos="fade-up" aos-duration="3000">
<pre><code><div aos="fade-up" aos-duration="3000"> </div></code></pre>
</div>
<div class="code code--right" aos="fade-down" aos-easing="linear" aos-duration="1500">
<pre><code><div aos="fade-down" aos-easing="linear" aos-duration="1500"> </div></code></pre>
</div>
<div id="example-anchor" class="code code--left" aos="fade-right" aos-offset="300" aos-easing="ease-in-sine">
<pre><code><div aos="fade-right" aos-offset="300" aos-easing="ease-in-sine"> </div></code></pre>
</div>
<div class="code code--right" aos="fade-left" aos-anchor="#example-anchor" aos-offset="500" aos-duration="500">
<pre><code><div aos="fade-left" aos-anchor="#example-anchor" aos-offset="500" aos-duration="500"> </div></code></pre>
</div>
<div class="code code--left" aos="fade-zoom-in" aos-easing="ease-in-back" aos-delay="300" aos-offset="0">
<pre><code><div aos="fade-zoom-in" aos-easing="ease-in-back" aos-delay="300" aos-offset="0"> </div></code></pre>
</div>
<div class="code code--right" aos="flip-left" aos-easing="ease-out-cubic" aos-duration="2000">
<pre><code><div aos="flip-left" aos-easing="ease-out-cubic" aos-duration="2000"> </div></code></pre>
</div>
</div>
</section>
<section class="section section--code">
<div class="container">
<h2 class="section-title">Anchor placement</h2>
<div class="code code--wider code--left" aos="fade-up" aos-anchor-placement="top-bottom">
<pre><code><div aos="fade-up" aos-anchor-placement="top-bottom"> </div></code></pre>
</div>
<div class="code code--wider code--right" aos="fade-up" aos-anchor-placement="center-bottom">
<pre><code><div aos="fade-up" aos-anchor-placement="center-bottom"> </div></code></pre>
</div>
<div class="code code--wider code--left" aos="fade-up" aos-anchor-placement="bottom-bottom">
<pre><code><div aos="fade-up" aos-anchor-placement="bottom-bottom"> </div></code></pre>
</div>
<div class="code code--wider code--right" aos="fade-up" aos-anchor-placement="top-center">
<pre><code><div aos="fade-up" aos-anchor-placement="top-center"> </div></code></pre>
</div>
<div class="code code--wider code--left" aos="fade-up" aos-anchor-placement="center-center">
<pre><code><div aos="fade-up" aos-anchor-placement="center-center"> </div></code></pre>
</div>
<div class="code code--wider code--right" aos="fade-up" aos-anchor-placement="bottom-center">
<pre><code><div aos="fade-up" aos-anchor-placement="bottom-center"> </div></code></pre>
</div>
</div>
</section>
<script type="text/javascript" src="js/jquery.1.7.1.min.js"></script>
<script type="text/javascript" src="dist/aos.js"></script>
<script type="text/javascript">
AOS.init({
easing: 'ease-out-back',
duration: 1000
});
</script>
<script>
$('.hero__scroll').on('click', function(e) {
$('html, body').animate({
scrollTop: $(window).height()
}, 1200);
});
</script>
</body>
</html>
CSS代码(demo.css):
@font-face{font-family:'icomoon';src:url('../fonts/icomoon.eot?rretjt');src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'),url('../fonts/icomoon.woff?rretjt') format('woff'),url('../fonts/icomoon.ttf?rretjt') format('truetype'),url('../fonts/icomoon.svg?rretjt#icomoon') format('svg');font-weight:normal;font-style:normal;}
[class^="icon-"],[class*=" icon-"]{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;/* Better Font Rendering =========== */
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#494A5F;color:#D5D6E2;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
a{color:#2fa0ec;outline:none;text-decoration:none;}
a:hover,a:focus{color:#74777b;text-decoration:none;}
CSS代码(styles.css):
/* Palette generated by Material Palette - materialpalette.com/indigo/pink */
/* Base16 Atelier Sulphurpool Dark - Theme */
/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool) */
/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
/* Atelier-Sulphurpool Comment */
.hljs-comment{color:#898ea4;}
/* Atelier-Sulphurpool Red */
.hljs-variable,.hljs-tag,.hljs-regexp,.hljs-name,.ruby .hljs-constant,.xml .hljs-tag .hljs-title,.xml .hljs-pi,.xml .hljs-doctype,.html .hljs-doctype,.css .hljs-id,.css .hljs-class,.css .hljs-pseudo{color:deepskyblue;}
.hljs-attribute{color:lightskyblue;}
/* Atelier-Sulphurpool Orange */
.hljs-number,.hljs-preprocessor,.hljs-built_in,.hljs-literal,.hljs-params,.hljs-constant{color:#c76b29;}
/* Atelier-Sulphurpool Yellow */
.ruby .hljs-class .hljs-title,.css .hljs-rule .hljs-attribute{color:#c08b30;}
/* Atelier-Sulphurpool Green */
.hljs-string,.hljs-value,.hljs-inheritance,.hljs-header,.ruby .hljs-symbol,.xml .hljs-cdata{color:darkorange;}
/* Atelier-Sulphurpool Aqua */
.hljs-title,.css .hljs-hexcolor{color:#22a2c9;}
/* Atelier-Sulphurpool Blue */
.hljs-function,.python .hljs-decorator,.python .hljs-title,.ruby .hljs-function .hljs-title,.ruby .hljs-title .hljs-keyword,.perl .hljs-sub,.javascript .hljs-title,.coffeescript .hljs-title{color:#3d8fd1;}
/* Atelier-Sulphurpool Purple */
.hljs-keyword,.javascript .hljs-function{color:#6679cc;}
.hljs{display:block;overflow-x:auto;background:#202746;color:#979db4;padding:0.5em;-webkit-text-size-adjust:none;}
.coffeescript .javascript,.javascript .xml,.tex .hljs-formula,.xml .javascript,.xml .vbscript,.xml .css,.xml .hljs-cdata{opacity:0.5;}
body{font-family:Helvetica,Tahoma;margin:0;padding:0;overflow-x:hidden;}
*,*:before,*:after{box-sizing:border-box;}
a{text-decoration:none;color:#FF4081;}
/** * Backgrounds */
.backgrounds{width:100%;height:100%;position:fixed;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:-1;}
.backgrounds .background{width:100%;height:100%;background-size:cover;position:absolute;left:0;top:0;background-attachment:fixed;}
.overlay:after{content:'';position:absolute;left:0;right:0;bottom:0;top:0;background:#3F51B5;opacity:0.8;}
/** * Hero */
.hero{width:100%;height:100vh;position:relative;overflow:hidden;color:#FFF;text-align:center;}
.hero-center{width:100%;position:absolute;top:40%;left:0;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);}
.hero__logo{font-size:60px;color:rgba(0,0,0,0.5);}
.hero__text{font-weight:normal;opacity:0.8;}
.hero__scroll{position:absolute;bottom:60px;width:200px;margin:auto;display:block;cursor:pointer;padding-bottom:40px;left:0;right:0;text-transform:uppercase;}
.hero__scroll .chevron{margin-top:20px;display:block;-webkit-animation:pulse 2s infinite;animation:pulse 2s infinite;color:#FF4081;}
@-webkit-keyframes pulse{0%{-webkit-transform:translate(0,0);transform:translate(0,0);}
50%{-webkit-transform:translate(0,10px);transform:translate(0,10px);}
100%{-webkit-transform:translate(0,0);transform:translate(0,0);}
}
@keyframes pulse{0%{-webkit-transform:translate(0,0);transform:translate(0,0);}
50%{-webkit-transform:translate(0,10px);transform:translate(0,10px);}
100%{-webkit-transform:translate(0,0);transform:translate(0,0);}
}
.octocat{position:absolute;top:20px;right:20px;width:80px;}
.octocat img{display:block;width:100%;}
.chevron::before{border-style:solid;border-width:0.25em 0.25em 0 0;content:'';display:inline-block;height:20px;position:relative;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);vertical-align:top;width:20px;}
.chevron.right:before{left:0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}
.chevron.bottom:before{top:0;-webkit-transform:rotate(135deg);-ms-transform:rotate(135deg);transform:rotate(135deg);}
.chevron.left:before{left:0.25em;-webkit-transform:rotate(-135deg);-ms-transform:rotate(-135deg);transform:rotate(-135deg);}
/** * Sections */
.section{width:100%;float:left;}
.section-title{text-align:center;color:#FFF;text-transform:uppercase;font-weight:normal;padding:30px 0;border-top:1px solid rgba(255,255,255,0.3);border-bottom:1px solid rgba(255,255,255,0.3);width:100%;clear:both;}
.container{width:970px;margin:0 auto;max-width:90%;-webkit-transform:translateZ(1000px);transform:translateZ(1000px);}
.code{width:40%;clear:both;height:200px;background:#FFF;border-radius:2px;margin:12vh 0;padding:10px;}
.code pre,.code code{color:#333;height:100%;margin:0;}
.code code{padding:20px 0 0 20px;}
.code--small code{padding-top:75px;}
.code--left{float:left;}
.code--right{float:right;}
.code--wider{width:60%;}
.code--wider code{padding-top:60px;}
.section--more{color:#FFF;background:#0E0F34;padding:20px 0 40px 0;}
.section-group{border-bottom:1px solid rgba(255,255,255,0.2);padding:30px 0;}
.section-group h3{margin:0 0 20px 0;text-transform:uppercase;}
.section-group h4{font-weight:normal;color:rgba(255,255,255,0.6);}
.section-group code{padding:20px;font-size:1.2em;}
.section-group .btn{margin-right:20px;}
.btn{padding:10px 20px;border:1px solid #FF4081;display:inline-block;position:relative;-webkit-transition:all 0.2s ease;transition:all 0.2s ease;overflow:hidden;}
.btn:before{content:'';position:absolute;left:0;right:0;width:1px;top:0;bottom:0;margin:auto;background:#FF4081;-webkit-transition:-webkit-transform 0.2s ease;transition:transform 0.2s ease;z-index:0;opacity:0;}
.btn span{position:relative;z-index:5;}
.btn:hover{color:#FFF;}
.btn:hover:before{-webkit-transform:scaleX(200);-ms-transform:scaleX(200);transform:scaleX(200);opacity:1;}
分享到QQ
分享到微博
微信扫一扫
