滚动时div的背景图片随之滚动

最新推荐文章于 2022-05-16 17:24:23 发布

转载最新推荐文章于 2022-05-16 17:24:23 发布 · 625 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gxsyj/p/5957227.html

本文介绍了一种网页设计技巧，即当页面滚动时，特定DIV元素的背景会随之滚动的效果实现方法。通过调整背景图片的位置来营造视觉上的滚动错觉。

在浏览一些网站时发现有一种效果是当滚动时看到某一DIV的背景也会随之滚动，如下：

当滚动时内容位置保持不变，但是内容后面的背景却在随着滚动。随之我通过审查元素看到了其是通过background-position来实现的，实现原理为当目标DIV出现在屏幕上时，当往下滚动时background-position的Y越来越小，反之则越大。

准备好一张大图，先写出布局

<style>
.wrap{width: 100%;height: 3000px;}
.wrap_bg{background: url(images/scroll_bg.jpg) no-repeat;background-position: center -300px;width: 100%;height: 600px;overflow: hidden;}
.content{width: 100%;height: 100px;text-align: center;color: #fff;font-size: 100px;margin-top: 100px;}
</style>

<div class="wrap">
    <div class="wrap_bg">
        <div class="content">
            内容
        </div>
    </div>
</div>

使用scroll()方法实现最终效果

var winHeight = $(window).height();//窗口高
var divHeight = $('.wrap_bg').height();//div高
var divTop = $('.wrap_bg').offset().top;//div距离html顶部高度
var prevtop = divTop;
$(window).on('scroll',function(){
    var winTop = $(window).scrollTop();//滚动条滚动高度
    if(winTop+winHeight>divTop && winTop<divTop+divHeight){//判断div是否出现在屏幕
        if(winTop>=prevtop){//滚动条往下
            $('.wrap_bg').finish().animate({
                backgroundPositionY:'-=10px'
            },100);
        }else{//滚动条往上
            $('.wrap_bg').finish().animate({
                backgroundPositionY:'+=10px'
            },100);
        }
        prevtop = $(window).scrollTop();
    }
})

转载于:https://www.cnblogs.com/gxsyj/p/5957227.html