我发现好的网站都用了如下GIF的模块与背景图片切换的效果，这让在下心痒痒的，所以自己动手写了一遍发现蛮简单的，分享给大家！

思路说明:

首先我的思路是介个样子的：先让一个空的宽度高度都占满的div孩子悬浮最底层，里面设置宽度高度-都占满背景图片，这样底部的图片就搞定了；
然后再设置竖直排列宽度高度都占满的div模块，模块的排布为：实体模块=》透明模块=》实体模块=》透明模块=》实体模块，这样的话向下滑动滚动条就可以把图片露出来了；
最后在根据当前位置距离顶部的距离来动态修改背景图片就好了。

js监听滚动写法：

html的注释写得比较详细就不多说了，css中我把模块的高度都设置成100vh了，也就是整个视图的高度，但是当浏览器放大或缩小时会出现图片切换时机偏差，要再次刷新浏览器才会正常，所以我推荐还是给个实高好一点，把.top .middle .bottom的高度设置在1000px以上效果好。

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<style>body {margin: 0;text-align: center;font-size: 100px;color: white;line-height: 100vh;}.main-div {width: 100%;height: 100vh;background-image: url(./images/1.jpg);background-repeat: no-repeat;background-size: 100% 100%;position: fixed;z-index: -1;}.transparent-module {width: 100%;height: 100vh;}.top {width: 100%;height: 100vh;background: #f00;}.middle {width: 100%;height: 100vh;background: #0f0;}.bottom {width: 100%;height: 100vh;background: #00f;}
</style><body><header></header><main><!-- 悬浮最底层的背景 --><div class="main-div" id="main-div"></div><!-- 红色top模块 --><div class="top">top</div><!-- 透明且高度100%模块 --><div class="transparent-module"></div><!-- 绿色middle模块 --><div class="middle" id="middle">middle</div><!-- 透明且高度100%模块 --><div class="transparent-module" id="tm"></div><!-- 蓝色bottom模块 --><div class="bottom">bottom</div></main><footer></footer>
</body>
<script>window.onload = () => {// console.log('welcome')var mainDiv = document.getElementById('main-div');var middle = document.getElementById('middle');var tm = document.getElementById('tm');// console.log(middle.offsetTop);// console.log(middle.getBoundingClientRect().top);// 获取绿色middle模块离页面顶部的距离var middleTop = middle.offsetTop || middle.getBoundingClientRect().top;// 获取第二个透明且高度100%模块离页面顶部的距离var tmTop = tm.offsetTop;// 实时监听当前页面离页面顶部的距离window.addEventListener("scroll", function(event) {// 当前页面离页面顶部的距离var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;// console.log(scrollTop)// 判断切换背景图片if (scrollTop < middleTop) {mainDiv.style.backgroundImage = "url(./images/1.jpg)"} else if (scrollTop > middleTop) {mainDiv.style.backgroundImage = "url(./images/2.jpg)"}});}
</script></html>

css背景悬浮写法：

另外我还发现了一种不需要操作js的写法，就是利用background-attachment: fixed;来实现，设置fixed后，背景就不会随之页面的滚动而滚动了。不过固定背景导致重绘的成本很高，所以在一些移动端是被禁止的，只需要在电脑端展示的话还是很不错的。

效果：

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>body {margin: 0;}section {height: 100vh;}.block1 {background: url(./images/1.jpg) center;background-size: cover;background-attachment: fixed;}.block2 {background: url(./images/2.jpg) center;background-size: cover;background-attachment: fixed;}.transparency {height: 60vh;}.card {display: flex;justify-content: center;align-items: center;height: 20vh;font-size: 100px;color: #fff;background-color: #1E1E1E;}
</style><body><main><section class="block1"><div class="card"><p>1</p></div><div class="transparency"></div><div class="card"><p>2</p></div></section><section class="block2"><div class="card"><p>3</p></div><div class="transparency"></div><div class="card"><p>4</p></div></section></main>
</body></html>

前端实现滑动页面动态切换背景图片的炫酷效果相关推荐

VUE动态切换皮肤 VUE动态切换背景图片操作 / VUE 主题切换
上正文使用:root ,var()函数实现 1. 创建皮肤或主题 css目录一个公共主题文件 theme.css,一个main.js引入文件theme-all.css,一个单独的主题样式文件 ...
vue 中实现动态切换背景图
1. 场景点击单选按钮动态切换背景图片 2. 代码 2.1 html 部分 <div :style="bgStyle"> </div> <a-rad ...
前端合成二维码与背景图片，批量导出ZIP下载
前端合成二维码与背景图片,批量导出ZIP下载背景:需要生成很多的二维码,并且结合背景图片一起生成图片,批量下载到本地,提供给打印厂商进行打印. 方案1:后台合成,后台提供下载. 方案2:前端合成,前 ...
VUE动态变换背景图片的实现 +背景图片铺满+ 一般路由的配置
一 .动态变换背景图片的实现代码如下: <template><div class="body" v-loading="loading" :s ...
jQuery Backstretch动态设置背景图片插件
贴图知乎:显著提升程序员身心健康和工作效率的装备有哪些? 笔记本: 1.银河舰队 PAVILION 15-bc011TX光暗影精灵2 2.顽石 -FL5900U7500超薄i7(性价比最高) ...
html5怎么在index设置背景,index.html · huangliusong/HTML5Canvas知乎登录页面动态线条背景动画代码 - Gitee.com...
HTML5+Canvas知乎登录页面动态线条背景动画代码 body{ text-align: center; background: #F7FAFC; overflow: hidden; backgr ...
WPF 动态切换按钮图片
WPF动态切换按钮图片就是在鼠标移上去的时候显示另一张图片首先先把三张图片放上去第一张第二张第三张然后给他们一个值,鼠标移上去的时候是true,显示图片,鼠标移开的时候显示false不显示图 ...
关于如何设置网页自动切换背景图片
这篇文章关于如何设置网页自动切换背景图片如何设置背景图片通过点击按钮来触发"切换背景图片"这个命令 ==重点== 如何在script里面改变网页的背景图片设置背景图片自动切换 ...
js 点击切换背景图片
您好,要使用JavaScript实现点击切换背景图片,可以按照以下步骤进行: 在HTML中,为需要切换背景图片的元素添加一个id属性,比如id="bg-img". 在JavaScr ...

前端实现滑动页面动态切换背景图片的炫酷效果

思路说明:

js监听滚动写法：

css背景悬浮写法：

前端实现滑动页面动态切换背景图片的炫酷效果相关推荐

最新文章

热门文章