双11小黑盒很炫酷？咱们用CSS变量来改进一下！
前言
刚过去的双11大家都去哪些网站购物了呢？不管去哪个网站，估计都少不了天猫吧，在逛天猫时发现了这样一种有趣的现象：
虽然说这种效果还比较常见，但有一个细节与众不同，比如说咱们先来看一个普通的 header 随窗口滚动而渐隐渐现的效果：
对比一下发现哪里不同了么，普通版的是一开始完全透明，随着窗口的滚动而慢慢显示出来，靠的是控制opacity透明度属性来实现的。
而小黑盒那版是一开始就有一个渐变色，渐变到接近半透明，这种方式看起来更加的优雅，但看起来只是一开始进入页面还没滚动的时候带着很漂亮的渐变色，一滚动的时候行为又和以前靠透明度的时候差不多。
咱们要改进的就是用滚动的距离来控制background-position，随着窗口的滚动，会慢慢改变渐变色渐变的程度而控制显隐效果。
样式
首先咱们先把header的样式写出来：
header {/* 设置一个控制背景色位置的CSS变量，方便JS控制 */--position: 100;/* 居中靠下显示子元素 */display: grid;place-items: end center;/* 设置为固定定位 */position: fixed;/* 距离上边左边为0 */top: 0;left: 0;/* 宽度铺满屏幕 */width: 100%;/* 给个合适的高度 */height: 40px;/* 白色字体 */color: white;/* 字体大小 */font-size: 16px;/* 让字体细一点 */font-weight: 100;/* 增加下内变局，防止文字过于靠下 */padding-bottom: 10px;/* 设置过渡效果 */transition: background-position .2s;/* 黑色渐变背景 */background: linear-gradient(black, rgba(148, 88, 88, 0.3) 80%, rgba(0, 0, 0, 0)) 0 calc(var(--position) * 1%) / 100% 300%;}
运行结果：
可以看到我们在header里面设置了一条CSS变量，如果不太清楚什么是CSS变量的话请点击这里，这里还用到了 gird 来进行居中，当然并不是完完全全的居中，而是稍稍偏下了一点，因为我看天猫的小黑盒就是做的偏下居中。
整体实现
然后咱们开始写 JS 代码了，因为纯 CSS 的话还是无法获取屏幕的滚动距离，但是为了能够更方便的进行双方交互，我们还是采用了CSS变量，因为CSS变量带来的提升绝不仅仅是节约点 CSS 代码，以及降低 CSS 开发和维护成本这点作用。
更重要的是，把组件中众多的交互开发从原来的JS转移到了CSS代码中，让组件代码更简洁，同时让视觉表现实现更加灵活了。 ——张鑫旭
CSS变量具体能为我们带来哪些好处，可以参考张鑫旭的博客：
《CSS变量对JS交互组件开发带来的提升与变革》
来看一下CSS变量是怎么与 JS 进行交互的：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><title>属于自己的渐变小黑盒</title><style>/* 清除默认样式 */* { padding: 0; margin: 0 }header {/* 设置一个控制背景色位置的CSS变量，方便JS控制 */--position: 100;/* 居中靠下显示子元素 */display: grid;place-items: end center;/* 设置为固定定位 */position: fixed;/* 距离上边左边为0 */top: 0;left: 0;/* 宽度铺满屏幕 */width: 100%;/* 给个合适的高度 */height: 40px;/* 白色字体 */color: white;/* 字体大小 */font-size: 16px;/* 让字体细一点 */font-weight: 100;/* 增加下内变局，防止文字过于靠下 */padding-bottom: 10px;/* 设置过渡效果 */transition: background-position .2s;/* 黑色渐变背景 */background: linear-gradient(black, rgba(148, 88, 88, 0.3) 80%, rgba(0, 0, 0, 0)) 0 calc(var(--position) * 1%) / 100% 300%;}main {/* 给个合适的高度 */height: 1000px;}</style>
</head>
<body><header>咱们自己的小黑盒</header><main></main><script>// 获取headerconst header = document.getElementsByTagName('header')[0]addEventListener('scroll', () => {// 获取偏移值const top = document.documentElement.scrollTop// 设置一个合适的范围if (top <= 200) {// 令header的渐变色位置变成计算后的渐变位置header.style.setProperty('--position', 100 - Math.min(100, top))} else {// 在移动一定范围后令其完全不透明header.style.setProperty('--position', 0)}})</script>
</body>
</html>
运行结果：
想象一下如果不用CSS变量的话会变成什么样：
header.style.backgroundPosition = '0 ' + 100 - Math.min(100, top) + '%'
虽然看起来好像没啥的，但当要控制的属性较多时这将会是一种灾难，而且这种方式要时刻都带着 CSS 单位，像 px、%、rem 这些，为我们增加了不必要的心智负担，而且也拖慢了程序的运行效率。
用了CSS变量之后都不用带单位了，直接赋值一个数字即可，那么为什么可以不带单位呢？答案就在 calc 函数上：
calc(
var(--position)*1%)
记住在这里可不能再用 JS 的思维来写 calc 函数了，在 JS 里我们用的是+，因为这代表了字符串拼接，而在这里数字乘以百分之一，就会变成具体的百分数，同理如果你需要的是其他单位的话可以根据具体需求进行灵活修改：
calc(
var(--position)*1px)
⚠️注意 px 前面那个1很重要，不能省略掉！
而且也不是必须要写1，还可以根据具体的需求按倍数来：
calc(
var(--position)*6.6rem)
扩展
其实从代码和我们日常生活中见到的效果可以得知，基本上滚动一段距离后header的透明度就固定住了不会再发生变化，浪费了监听 onscroll 事件。但又不能取消监听，因为不知道用户何时会再滑到顶部去，但这种情况却非常适合做另一种效果：
我忘记了这种效果叫啥来着，总之就是随着用户滚动页面的距离而在顶部显示一个类似于进度条之类的东西，方便用户得知自己处在网页中大概什么样的一种位置，来看代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><title>属于自己的渐变小黑盒</title><style>/* 清除默认样式 */* { padding: 0; margin: 0 }header {/* 设置一个控制位置的CSS变量，方便JS控制 */--position: 0;/* 设置为固定定位 */position: fixed;/* 距离上边左边为0 */top: 0;left: 0;/* 宽度铺满屏幕 */width: 100%;/* 给个合适的高度 */height: 10px;/* 设置过渡效果 */transition: transform .1s;/* 渐变背景 */background: linear-gradient(to right,#4481eb,#04befe);/* 设置形变效果 */transform: scaleX(var(--position));/* 设置变形参照点 */transform-origin: left;}main {/* 给个合适的高度 */height: 10000px;/* 渐变背景 */background: linear-gradient(#30cfd0,#330867)}</style>
</head>
<body><header></header><main></main><script>// 获取headerconst header = document.getElementsByTagName('header')[0]addEventListener('scroll', () => {// 获取偏移值const top = document.documentElement.scrollTop// 获取页面总高度const height = document.documentElement.scrollHeight// 设置CSS变量if (top > height - document.documentElement.clientHeight - 1) {header.style.setProperty('--position', 1)} else {header.style.setProperty('--position', top / height)}})</script>
</body>
</html>
本文首发于微信公众号：《前端学不动》
双11小黑盒很炫酷？咱们用CSS变量来改进一下！相关推荐
- 微信小程序：炫酷手持滚动弹幕生成小工具
这是一款滚动弹幕生成微信小程序源码 让弹幕文字在手机屏幕上跑起来,LED弹幕 手机弹幕,告白神奇,等 支持多种模板,每一种模板都支持自定义颜色等等 字体跳动,字体表白等等 另外用户也可以支持自定义文字 ...
- 微信小程序：炫酷恶趣制作神器小程序源码
这是一款强大的恶趣制作小程序源码 内包含了N种模板制作,另外并有大分类 另外新增加了姓氏头像的制作 另外小编还给添加了几个流量主广告,包含了每一个页面都覆盖了 而且流量主还不是单一种: Banner ...
- HTML5七夕情人节表白网页(抖音超火3D炫酷魔方) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤抖音超火❤3D炫酷魔方❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白 这是程序 ...
- python打地鼠游戏教程_Python入门小游戏，炫酷打地鼠教程第二部分，都是干货
还记得那位玩打地鼠小游戏,然后学会python的女白领吗? 那份教程还没有写完,只写到了对游戏中精灵的定义,然后我们继续写. 实现了游戏精灵的定义后,我们就要开始展现真正的技术啦,也就是写主程序. 首 ...
- 小坤二次元炫酷导航HTML源码
介绍: 很好看的一个htmlの引导页/导航页! 记事本打开可修改内容.需要的上! 网盘下载地址: http://kekewangLuo.net/K7WrAtEWLKT0 图片:
- PR片头片尾模板 很炫酷的能源火花粒子logo展示pr开场视频模板
这是一个令人惊叹的Premiere Pro模板与霓虹灯发光火花和一个华丽的设计和一个充满活力的动画漩涡,时尚地爆发光,并显示您的徽标.本模板包含1个标志占位符和1个可编辑文本层.这是一个儿童的游戏使用 ...
- 乐字节炫酷HTML 与 CSS
HTML 与 CSS 主要内容 HTML HTML(HyperText Markup Language)就是超文本标记语言."超文本"就是表示页面内可以包含非文字元素,如:图片 ...
- PPT炫酷小技能总结
PPT炫酷小技能总结 PPT中插入图片和文字是最基础和常见的,但是仅仅是这样还不足以让PPT显得更加专业和炫酷. 1.动画效果 动画效果肯定是要加的.选中图片--点击动画一栏--点击该栏下方的自定义动 ...
- 跟风购物狂欢节，百度小程序首战双11
"双11"成小程序试验场.11月初微信小程序推出诸多功能,直指"双11"的当属开放商品搜索,用户在小程序搜索框中输入关键词即可看到商品列表.首次迎战" ...
最新文章
- OCP-052 053部分答案解析
- 如何提高邮件投递能力-提高邮件群发能力的方法
- Game as a Service —— 开源云游戏搭载WebRTC
- elasticsearch中文分词器ik-analyzer安装
- Wait-for-it之参考
- 综述：全国软考首遭试卷丢失 20万考生措手不及
- Vue 开发环境显示log信息
- 神经网络如何提高准确率,神经网络的求解方式
- 图扑软件 3D 组态编辑器，低代码零代码构建数字孪生工厂
- 字节跳动CEO梁汝波接棒张一鸣一年：使命是我们前进的动力
- iOS- 添加UIWindow蒙版
- 推荐一个超人气的类似MSN弹出的控件
- 视频教程-PR教程-Premiere 2020影视剪辑实战精讲-其他
- 微型计算机内存为16m,微型计算机的内存为16M,指的是其内存容量为()。
- sublime手动安装GoSublime
- 少儿编程网站源码和scratch课程
- 如何在SVN中忽略某个文件或文件夹
- 服务器集群有哪些类型
- C对接国际验证码接口DEMO示例
- 第五章.系统安全分析与设计