JS 实现元素颜色跟随滚动条变化
灰色深浅变化滚动部分颜色部分完整JS代码彩色变化颜色部分修改修改后的彩色变化JS完整代码最近在学习JS开发,突然想实现这样一个效果,滚动条往下拉时元素颜色由浅变深,于是就尝试做这样一个功能。
灰色深浅变化
滚动部分
滚动部分,计算出网页可以滚动的范围,同时监听滚动事件,然后使用计算颜色的变化,给目标加上相应的CSS样式即可。
var scrollBegin = 200,//颜色变化开始位置,自行定义scrollTop, //当前滚动位置scrollArea; //可滚动区域//计算可滚动区域scrollArea = (function () {if ($(document).height() > $(window).height()) {// 可滚动高度 = 网页高度 - 视窗高度return $(document).height() - $(window).height();} else {return $(window).height();}})()//监听滚动$(window).scroll(function () {//获取当前滚动位置scrollTop = $(this).scrollTop();//修改颜色......})
颜色部分
最初想实现的效果内容在顶部时为浅色,滚动到底部变成深色。在RGB颜色上,这种灰色的颜色变化就是三个颜色的色值进行相同的变化。
这里涉及到RGB颜色模式的一些知识,RGB颜色模式就是红(R)、绿(G)、蓝(B)三原色以光的混合模式进行混合得到表现颜色,对应色值越高则该颜色的明度越高,也就是该颜色越明显,如RGB(255,0,0)表示红色光源最亮,绿色和蓝色光源最暗,这样得到的混合颜色最终表现为红色。
如果三个颜色色值均为最高,即为RGB(255,255,255),则混合而成的颜色为白色,反之RGB(0,0,0)则为黑色。因此介于之间的三色值相等的颜色即为不同深浅的灰色。
于是想要实现灰色从浅变深,则需要设置相同的RGB三种颜色的色值即可。需要的参数如下。
vartopColor = 255,//顶部颜色色值(浅灰色),自行定义bottomColor = 100,//底部颜色色值(深灰色),自行定义settingColor = 0,//用于设置的颜色色值,计算得出originColor, //元素本身的颜色colorValue; //用于css样式赋值的颜色语句//获取对象本身颜色originColor = $(target).css("background-color");
关于色值,则是按照这个公式来计算。
色值=(顶部色值−底部色值)∗(当前位置−开始位置)可滚动高度−开始位置色值=\frac{(顶部色值-底部色值)*(当前位置-开始位置)}{可滚动高度-开始位置} 色值=可滚动高度−开始位置(顶部色值−底部色值)∗(当前位置−开始位置)
其代码如下
//监听滚动中 修改颜色... 的部分if (scrollTop < scrollBegin) {//未到开始位置时,设置为初始颜色$(target).css({"background-color": originColor });} else {//开始颜色变化//计算色值settingColor = topColor - ((topColor - bottomColor) * (scrollTop - scrollBegin) / (scrollArea - scrollBegin));//获得css样式赋值语句colorValue = "rgb(" + settingColor + "," + settingColor + "," + settingColor + ")";//颜色变化$(target).css({"background-color": colorValue });}
完整JS代码
完整的JS代码如下,记得引入JQuery
<script src="/jquery-latest.js"></script><script>var scrollBegin = 200,//颜色变化开始位置scrollTop, //当前滚动位置scrollArea, //可滚动区域topColor = 255, //顶部颜色色值bottomColor = 100,//底部颜色色值settingColor,//计算出来用于设置的颜色色值originColor, //元素本身的颜色colorValue, //用于css样式赋值的颜色target = "body"; //操作对象//获取对象本身颜色originColor = $(target).css("background-color");//计算可滚动区域scrollArea = (function () {if ($(document).height() > $(window).height()) {return $(document).height() - $(window).height();} else {return $(window).height();}})()//监听滚动$(window).scroll(function () {//获取当前滚动位置scrollTop = $(this).scrollTop();//修改颜色if (scrollTop < scrollBegin) {//未到开始位置时,设置为初始颜色$(target).css({"background-color": originColor });} else {//开始颜色变化//计算色值settingColor = topColor - ((topColor - bottomColor) * (scrollTop - scrollBegin) / (scrollArea - scrollBegin));//获得css样式赋值语句colorValue = "rgb(" + settingColor + "," + settingColor + "," + settingColor + ")";//颜色变化$(target).css({"background-color": colorValue });}})</script>
直接对body元素使用这个样式,可以得到以下的效果
彩色变化
后来想了一下,可以拓展成彩色的变化,滚动部分内容基本相同,改变颜色的部分,即可实现彩色变化的效果。
颜色部分修改
首先,如果要让颜色实现彩色变化,那么三原色色值上的变化肯定不相同了,为了方便使用,定义了一个颜色的构造函数。
//颜色构造函数function RGB(r, g, b) {this.red = r;this.green = g;this.blue = b;//获取颜色赋值语句this.getValue = function () {return "rgb(" + this.red + "," + this.green + "," + this.blue + ")";}}
然后对顶部颜色和底部颜色的三原色都计算色值变化
//色值计算公式function colorCalc(top, bottom) {return top - ((top - bottom) * (scrollTop - scrollBegin) / (scrollArea - scrollBegin));}//红色色值settingColor.red = colorCalc(topColor.red, bottomColor.red);//绿色色值settingColor.green = colorCalc(topColor.green, bottomColor.green);//蓝色色值settingColor.blue = colorCalc(topColor.blue, bottomColor.blue);//目标赋值$(target).css({"background-color": settingColor.getValue() });}
修改后的彩色变化JS完整代码
<script src="/jquery-latest.js"></script><script>var scrollBegin = 200,//颜色变化开始位置scrollTop, //当前滚动位置scrollArea, //可滚动区域topColor,//顶部颜色色值bottomColor, //底部颜色色值settingColor, //计算出来用于设置的颜色色值originColor, //元素本身的颜色target = "body"; //操作对象//获取对象本身颜色originColor = $(target).css("background-color");//颜色构造函数function RGB(r, g, b) {this.red = r;this.green = g;this.blue = b;//获取颜色赋值语句this.getValue = function () {return "rgb(" + this.red + "," + this.green + "," + this.blue + ")";}}//颜色设置topColor = new RGB(156, 80, 80);//顶部颜色,自定义bottomColor = new RGB(201, 230, 162);//底部颜色,自定义settingColor = new RGB(255, 255, 255);//设置使用,计算得出//计算可滚动区域scrollArea = (function () {if ($(document).height() > $(window).height()) {return $(document).height() - $(window).height();} else {return $(window).height();}})()//色值计算公式function colorCalc(top, bottom) {return top - ((top - bottom) * (scrollTop - scrollBegin) / (scrollArea - scrollBegin));}//监听滚动$(window).scroll(function () {//获取当前滚动位置scrollTop = $(this).scrollTop();if (scrollTop < scrollBegin) {//未到开始位置时,设置为初始颜色$(target).css({"background-color": originColor });} else {//开始颜色变化//红色色值settingColor.red = colorCalc(topColor.red, bottomColor.red);//绿色色值settingColor.green = colorCalc(topColor.green, bottomColor.green);//蓝色色值settingColor.blue = colorCalc(topColor.blue, bottomColor.blue);//目标赋值$(target).css({"background-color": settingColor.getValue() });}})</script>
得到的效果如下
如果觉得《JS 实现元素颜色跟随滚动条变化》对你有帮助,请点赞、收藏,并留下你的观点哦!