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

2025-11-06 15:05:44

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页面上下滚动触发区块动画

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。

相关推荐

jQuery显示页面滚动进度

阅读量：56

jquery上下页面视差滚动切换

阅读量：101

动画影视公司的经营范围怎么填写

阅读量：137

区块如何连接成区块链

阅读量：33

快速了解区块链

阅读量：58

猜你喜欢

猜你喜欢