滚动时div的背景图片随之滚动
2024-10-12 09:32:56
在浏览一些网站时发现有一种效果是当滚动时看到某一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();
}
})
最新文章
- 转:windows下命令行工具
- Mac 安装 eclipse
- POJ 1125 Stockbroker Grapevine 最短路 难度:0
- VCC、VDD、VEE、VSS等有关电源标注的区别
- JAVA:类,对象,成员属性,成员方法,构造方法,类变量,类方法<;2>;
- oracle是数据库的学习第一节:数据库的安装
- spark1.1.0学习路线
- 成都传智播客JDBC视频及讲师介绍
- 调用短信接口,先var_dump()看数据类型是object需要json_decode(json_encode( $resp),true)转换成array
- LBPL--基于Asp.net、 quartz.net 快速开发定时服务的插件化项目
- 手动ecache处理
- AI应用开发实战 - 手写算式计算器
- C# 构造tree菜单工具方法
- Lodop打印设计里的 打印项对齐
- grid - 使用相同的名称命名网格线和设置网格项目位置
- Software Engineer Title Ladder
- 大话设计模式之模板模式 C#
- linux的!的用法
- Up and running with Apache Spark on Apache Kudu
- django中admin的使用