<!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>jQuery页面滚动文字图片元素淡入动画特效</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"><!--可无视-->
<link rel="stylesheet" type="text/css" href="css/demo.css"><!--可无视-->
<link rel="stylesheet" href="css/animate.css"><!--必要文件-->
<style type="text/css">
html,
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body {
margin: 0 auto;
padding: 0;
}
[data-animation] {
opacity: 0;
}
[data-animation].animated {
opacity: 1;
}
#hero {
background: radial-gradient(circle at 50% center, #dee294 0%, #b7bd32 70%);
height: 100vh;
text-align: center;
}
#hero h1 small {
font-size: 50%;
}
.table-wrap {
display: table;
height: 100%;
width: 100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
#lower {
background: radial-gradient(circle at 50% center, #f0c916 0%, #ccad1a 70%);
overflow: hidden;
text-align: center;
min-height: 600px;
padding: 150px 0;
}
#lower img {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
</style>
</head>
<body>
<section id="hero">
<div class="table-wrap">
<div class="table-cell">
<h1 class="heading" data-animation="fadeInUp">
页面滚动查看效果 <br>
<small>(hint: scroll down)</small>
</h1>
</div>
</div>
</section>
<section id="lower" data-animation-container>
<h1 data-animation="fadeIn" data-animation-child>
An animation set!
</h1>
<div class="container">
<div class="row">
<div class="col-sm-4" data-animation-child data-animation="fadeInUp" data-animation-delay="500ms">
<img src="img/1.jpg" alt="" class="img-responsive center-block">
</div>
<div class="col-sm-4" data-animation-child data-animation="fadeInUp" data-animation-delay="1500ms">
<img src="img/2.jpg" alt="" class="img-responsive center-block">
</div>
<div class="col-sm-4" data-animation-child data-animation="fadeInUp" data-animation-delay="2500ms">
<img src="img/3.jpg" alt="" class="img-responsive center-block">
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollAnimations.min.js"></script>
<script type="text/javascript">
(function(){
var $containers = $('[data-animation]:not([data-animation-child]), [data-animation-container]');
$containers.scrollAnimations();
}());
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人</a></p>
</div>
</body>
</html>
