特效描述:页面滚动 触发区块。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>