欢迎光临!欢迎来到小司的个人网站

关键词搜索:

当前位置: 首页>前端开发>JQUERY知识>

jQuery-屏幕滚动触发动画 查看代码演示

日期:2018-05-16 编辑:admin 阅读次数:

1.首先我们要利用H5写出网页结构:

<div>

<h1 class="ltr">从左至右水平方向移入</h1>

<h2 class="rtl">从右至左水平方向移入</h2>

<h3 class="ttb">从上至下垂直方向移入</h3>

<h4 class="btt">从下至上垂直方向移入</h4>

</div>

2.利用CSS属性写出结构样式,

再利用CSS3属性&lsquo;animation&rsquo;以及&lsquo;@keyframes&rsquo;创建出动画(ps:此处未考虑兼容性问题,仅在Chrome浏览器测试。)。

<style type="text/css">

*{margin: 0;padding: 0;}

div{width: 1200px;height: 3000px;background: #f1f1f1;margin: 0 auto;padding: 100px 0 50px 0;text-align: center;}

 

                /*动画从左至右水平方向移入s*/

.ltr {animation:ltrAnimate 2s ease .5s forwards;}

@keyframes ltrAnimate {

0% {

transform:translateX(-400px);

opacity:0;

}

100% {

transform:translateX(0px);

opacity:1;

}

}

/*动画从左至右水平方向移入e*/

 

/*动画从右至左水平方向移入s*/

.rtl {animation:rtlAnimate 2s ease .5s forwards;}

@keyframes rtlAnimate {

0% {

transform:translateX(400px);

opacity:0;

}

100% {

transform:translateX(0px);

opacity:1;

}

}

/*动画从右至左水平方向移入e*/

 

/*动画从上至下水平方向移入s*/

.ttb {animation:ttbAnimate 2s ease .5s forwards;}

@keyframes ttbAnimate {

0% {

transform:translateY(-400px);

opacity:0;

}

100% {

transform:translateY(0px);

opacity:1;

}

}

/*动画从上至下垂直方向移入e*/

 

/*动画从下至上垂直方向移入s*/

.btt {animation:bttAnimate 2s ease .5s forwards;}

@keyframes bttAnimate {

0% {

transform:translateY(400px);

opacity:0;

}

100% {

transform:translateY(0px);

opacity:1;

}

}

/*动画从下至上垂直方向移入e*/

此时动画已创建完成,刷新页面即可执行动画效果。

3.触发效果。关键要找到触发动画执行的点&lsquo;屏幕滚动:scroll&rsquo;,利用&lsquo;scrollTop() &rsquo;方法返回或设置匹配元素的滚动条的垂直位置。代码如下:

<!--引入jQuery库-->

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

 

<script>

            $(function(){

$(window).scroll(function () {

if ($(window).scrollTop() >= 100) {

$('h1').removeClass('ltr');

$('h2').removeClass('rtl');

$('h3').removeClass('ttb');

$('h4').removeClass('btt');

}else{

$('h1').addClass('ltr');

$('h2').addClass('rtl');

$('h3').addClass('ttb');

$('h4').addClass('btt');

}

});

    });

</script>

5.以上仅个人项目开发时所感,如有不足,请留言补充,谢谢!

相关文章

×