灰色深浅变化

滚动部分

滚动部分，计算出网页可以滚动的范围，同时监听滚动事件，然后使用计算颜色的变化，给目标加上相应的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三种颜色的色值即可。需要的参数如下。

 var topColor = 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="http://code.jquery.com/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="http://code.jquery.com/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 实现元素颜色跟随滚动条变化相关推荐

js WOW.js滚动动画，跟随滚动条位置执行动画
原生js实现教程: 元素出现在页面时,添加动画,配合animate.css使用_hjhfreshman的博客-CSDN博客_给元素添加动画效果图: 如上所示,每滚动到一个区域,执行动画如:淡入,浮入 ...
pandas使用pct_change计算数据列的百分比变化、环比变化率：计算当前元素和前一个元素之间的百分比变化、使用style函数指定format的格式：百分比、缺失值替换、用颜色标注极大值和极小值
pandas使用pct_change计算数据列的百分比变化.环比变化率:计算当前元素和前一个元素之间的百分比变化.使用style函数指定format的格式:百分比.缺失值替换.用颜色标注极大值和极小值 ...
android 通知栏背景颜色跟随app导航栏背景颜色变化而变化
原文地址为: android 通知栏背景颜色跟随app导航栏背景颜色变化而变化通知栏(notification)背景颜色跟随app导航栏(top title)背景颜色变化而变化. 这也叫沉浸式状态栏 ...
html判断是否有滚动条,JS 判断元素是否可以滚动
今天在解决 ios 移动端滚动穿透的问题时遇到一个问题,就是判断元素能否滚动,把这个过程记录下来.以下以纵向滚动为例,横向滚动同理. 嫌麻烦的可以直接查看代码. 基础概念 Element.scroll ...
js网页背景颜色不断变化js特效
下载地址 js网页背景颜色不断变化特效,渐变色动画效果. dd:
HTML使svg整体自适应网页变化、以元素颜色填充、隐藏显示
HTML使svg整体自适应网页变化.以元素颜色填充.隐藏显示 1.如下所示 $(function () {//使SVG的所有元素自适应大小let svg = document.getElementsB ...
php 鼠标移动手型,JS实现的鼠标跟随代码(卡通手型点击效果)
这篇文章主要介绍了JS实现的鼠标跟随代码,带有卡通手型点击效果.涉及JavaScript鼠标事件的响应与页面元素的动态调用技巧,需要的朋友可以参考下,具体如下: 一个跟随鼠标的小手效果,鼠标移在哪里, ...
js操作元素：改变元素内容有两种方式： interText 和 innerHTML的区别，常用的元素的属性操作，仿电脑系统时间问好，表单元素的属性操作，案例：仿京东显示隐藏密码，样式属性操作
文章目录操作元素改变元素内容有两种方式: interText 和 innerHTML的区别常用的元素的属性操作案例:仿电脑系统时间问好表单元素的属性操作案例:仿京东显示隐藏密码样式属性操 ...
怎么给html增加鼠标跟随,js实现简单鼠标跟随效果的方法
本文实例讲述了js实现简单鼠标跟随效果的方法.分享给大家供大家参考.具体分析如下: 鼠标跟随,顾名思义,就是在鼠标移动的时候,有个动画跟随着鼠标一起移动. 要点一: var oEvent = evt ...

JS 实现元素颜色跟随滚动条变化