特效描述：页面滚动 触发区块。jQuery页面滚动触发区块特效代码下载
代码结构
1. 引入CSS
<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/demo.min.css"> <link rel="stylesheet" type="text/css" href="css/animate.min.css">
2. 引入JS
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script> <script src="dist/scrolla.jquery.min.js"></script>
3. HTML代码
<section class="section section-demo">
<div class="wrapper">
<div class="items group">
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.3s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.0s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.3s"></div>
</div>
<div class="item">
<div class="block offset animate" data-animate="bounceIn" data-duration="2.0s" data-delay="0.4s" data-offset="100"></div>
</div>
<div class="item">
<div class="block offset animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.9s" data-offset="300"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.0s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.3s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.3s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.0s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.3s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.4s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.3s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.0s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.3s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.3s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.0s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.3s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.3s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.0s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.3s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>
</div>
</div>
</div>
<div class="buttons">
<a href="#" class="button animate" data-animate="flipInY" data-duration="2.0s" data-delay="0.1s" id="button-show-window">打开一个模态窗口</a>
</div>
</section>
<script id="modal-template" type="text/html">
<section class="modal">
<div class="modal-container">
<div class="modal-middle">
<div class="modal-box animate" data-animate="fadeIn" data-duration="0.35s">
<h2>Dynamic modal window</h2>
<p>$('.animate').scrolla('bind');</p>
<div class="boxs group">
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.3s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.0s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>
</div>
<div class="item">
<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>
</div>
</div>
<div class="buttons">
<button class="button modal-close">Close</button>
</div>
</div>
</div>
</div>
</section>
</script>
<script>
$('.animate').scrolla({
mobile: false,
once: false
});
$('#button-show-window').click(function() {
var template = $('#modal-template').html();
$('body').append(template);
$('.animate').scrolla('bind');
$('section.modal .modal-close').click(function() {
$(this).closest('section.modal').remove();
});
return false;
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
