网站首页 美食营养 游戏数码 手工爱好 生活家居 健康养生 运动户外 职场理财 情感交际 母婴教育 生活知识 知识问答

jQuery页面上下滚动触发区块动画

时间：2026-02-12 17:11:43

1、新建html文档。

jQuery页面上下滚动触发区块动画

2、书写hmtl代码。

<section class="section section-demo">

<div class="wrapper">

<div class="items group">

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.3s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.0s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.3s"></div>

</div>

<div class="item">

<div class="block offset ani" data-ani="bounceIn" data-duration="2.0s" data-delay="0.4s" data-offset="100"></div>

</div>

<div class="item">

<div class="block offset ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.9s" data-offset="300"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.0s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.3s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.3s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.0s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.3s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.4s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.3s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.0s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.3s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.3s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.0s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.3s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.3s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.0s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.3s"></div>

</div>

<div class="item">

<div class="block ani" data-ani="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>

</div>

</div>

</div>

<div class="buttons">

<a href="#" class="button ani" data-ani="flipInY" data-duration="2.0s" data-delay="0.1s" id="button-show-window">打开一个模态窗口</a>

</div>

jQuery页面上下滚动触发区块动画

3、书写css代码。

body, html { font-size: 100%; padding: 0; margin: 0;}

*,

*:after,

*:before {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.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;

}

a{ color: rgba(255, 255, 255, 0.6);outline: none;text-decoration: none;-webkit-transition: 0.2s;transition: 0.2s;}

a:hover,a:focus{color:#74777b;text-decoration: none;}

.htmleaf-container{

margin: 0 auto;

}

jQuery页面上下滚动触发区块动画

4、书写并添加js代码。

<script src="js/jquery-1.11.0.min.js"></script>

<script src="dist/scrolla.jquery.min.js"></script>

<script>

$('.ani mate').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>

jQuery页面上下滚动触发区块动画

5、代码整体结构。

jQuery页面上下滚动触发区块动画

6、查看效果。

jQuery页面上下滚动触发区块动画

为你推荐： 中国为什么不打日本 复印机怎么用 马桶堵了怎么办 手肿胀是怎么回事 present怎么读 端午节的画怎么画 在吗用英语怎么说 香椿芽怎么吃 怎么瘦腿 猫为什么要吃老鼠
© 2026 一点资料
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com