用JS制作博客页面背景随滚动渐变的效果
今天颓了一会,用JavaScript给我的博客园博客写了一个页面背景随滚动而渐变的效果,做完之后自我感觉良好……
下面就以我的博客园博客为例,介绍一下如何制作这个效果!
准备
- 申请博客园的JS权限(如果你也想把它用在自己的博客园上)
- 可能需要一些JS的基础知识(你可以打开w3school,然后就当自己准备好了)
- 可能需要一些CSS基础知识(你需要知道颜色是怎样用16进制表示的)
——当然,你也可以复制下面的代码然后走人……
注意:如果你想要用在自己的博客园上,请注意博客园的不同模板对应的元素class
也可能是不同的。
代码
首先,在“页首HTML代码”中新建一个div,放在最下面一层。这个div用来放渐变的背景颜色。
<div id="backGround" style="position: fixed; width:100%; height: 100%; top: 0; left: 0; background-color: #bff687; z-index: -1"></div>
然后用js监听window.onscroll
事件,记录一个cnt变量,每监听到一次,就给cnt加上1,然后用cnt生成当前颜色。
至于颜色的生成方式你可以自己发明一个。我用了三个相位不同的sin函数生成R、G、B三个颜色的值。
function getTitleValue(start, x){
var ret = titleMax - 1 - rangeValue + Math.floor(rangeValue * Math.sin(start + x));
return ret;
}
function getBackgroundColor(){
var red = getBackgroundValue(0, cnt * 2 * PI / 256).toString(16);
var green = getBackgroundValue(2 * PI / 3, cnt * 2 * PI / 256).toString(16);
var blue = getBackgroundValue(4 * PI / 3, cnt * 2 * PI / 256).toString(16);
return "#" + red + green + blue;
}
这里讲一下如何用js修改某个元素的颜色:
function changeColor(){
var backGround = document.getElementById("backGround");
var titles = document.getElementsByClassName("postTitle2");
var newTitleColor = getTilteColor();
backGround.style.backgroundColor = getBackgroundColor();
for(var i = 0; i < titles.length; i++)
titles[i].style.color = newTitleColor;
cnt = (cnt + 1) % 256;
}
先getElementById
,然后调用生成颜色的函数,生成了一个字符串,形如#aabbcc
,代表颜色。然后用JS修改CSS。
完整代码:
<div id="backGround" style="position: fixed; width:100%; height: 100%; top: 0; left: 0; background-color: #bff687; z-index: -1"></div>
<script>
var cnt = 0, PI = Math.acos(-1);
var rangeValue = 64, backgroundMax = 256, titleMax = 192;
function getBackgroundValue(start, x){
var ret = backgroundMax - 1 - rangeValue + Math.floor(rangeValue * Math.sin(start + x));
return ret;
}
function getTitleValue(start, x){
var ret = titleMax - 1 - rangeValue + Math.floor(rangeValue * Math.sin(start + x));
return ret;
}
function getBackgroundColor(){
var red = getBackgroundValue(0, cnt * 2 * PI / 256).toString(16);
var green = getBackgroundValue(2 * PI / 3, cnt * 2 * PI / 256).toString(16);
var blue = getBackgroundValue(4 * PI / 3, cnt * 2 * PI / 256).toString(16);
return "#" + red + green + blue;
}
function getTilteColor(){
var red = getTitleValue(0, cnt * 2 * PI / 256).toString(16);
var green = getTitleValue(2 * PI / 3, cnt * 2 * PI / 256).toString(16);
var blue = getTitleValue(4 * PI / 3, cnt * 2 * PI / 256).toString(16);
return "#" + red + green + blue;
}
window.onload = window.onscroll = function changeColor(){
var backGround = document.getElementById("backGround");
var titles = document.getElementsByClassName("postTitle2");
var newTitleColor = getTilteColor();
backGround.style.backgroundColor = getBackgroundColor();
for(var i = 0; i < titles.length; i++)
titles[i].style.color = newTitleColor;
cnt = (cnt + 1) % 256;
}
</script>
用JS制作博客页面背景随滚动渐变的效果的更多相关文章
- 原生js添加博客点击鼠标出小心心效果~~
昨天刚申请成功JS权限,心血来潮想添加点东西,记得之前看到别人家博客首页点击鼠标的时候会出现炫酷的 “小心心”,自己也来搞一个.没有用jquery啥的框架,原生js写起来麻烦了点,不过主要是怕博客首页 ...
- 转载: 使用vue全家桶制作博客网站 HTML5 移动网站制作的好教程
使用vue全家桶制作博客网站 前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue. ...
- 使用react全家桶制作博客后台管理系统 网站PWA升级 移动端常见问题处理 循序渐进学.Net Core Web Api开发系列【4】:前端访问WebApi [Abp 源码分析]四、模块配置 [Abp 源码分析]三、依赖注入
使用react全家桶制作博客后台管理系统 前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基 ...
- 一个基于Vue.js+Mongodb+Node.js的博客内容管理系统
这个项目最初其实是fork别人的项目.当初想接触下mongodb数据库,找个例子学习下,后来改着改着就面目全非了.后台和数据库重构,前端增加了登录注册功能,仅保留了博客设置页面,但是也优化了. 一.功 ...
- 使用vuepress搭建GitHub pages静态博客页面
vuepress官网 vuepress是尤大开发来写文档的静态页面.可以用Markdown 语法,并且也可以使用vue模块化的方式开发页面. vuepress-theme-reco 是另外的开发者开发 ...
- Confluence 6.15 博客页面(Blog Posts)宏参数
参数是让你可以用来控制宏的格式和输出的选项.在 Confluence 存储格式或者 Wiki 标记(wikimarkup)中使用的参数名与在宏浏览器中使用的标签名是不同的,在下面我们将会用括号列出 ...
- Confluence 6.15 博客页面(Blog Posts)宏
博客页面宏允许你 Confluence 页面中显示博客页面.通过单击博客的标题将会把你链接到博客页面中. 使用博客页面宏 为了将博客页面宏添加到页面中: 从编辑工具栏中,选择 插入(Insert) ...
- 使用vue全家桶制作博客网站
前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue.vue-router.vuex.v ...
- 使用react全家桶制作博客后台管理系统
前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基于react全家桶(React.React-r ...
随机推荐
- IE6 select穿透问题(div 定位无法遮盖select)!
此问题,早有耳闻,可是一直都没有亲身碰到过,也就没有过多的去在意这些问题. 这一回总算是见识到了ie的厉害.虽是在ie选项中大大的写着ie版本号是ie11 .可是有些部分确实走的ie6的内核.怪不得微 ...
- python_环境的配置
1.首先登入官网:https://www.python.org/downloads/windows/ 下载: 下载executable installer 2.安装 ipython,jupyter 地 ...
- Flutter - 添加从左向右滑动,返回上一个页面
很多App比如微信.IT之家等都支持从屏幕左侧向右滑动,来返回上一个页面. 很多iOS上的App也都支持. 那么这个神奇的手势滑动是怎么实现的呢? 其实非常简单,只需要添加一句话即可. platfor ...
- WPF save listbox config
UI <Grid x:Class="WzlyTool.ReplyContentUI" xmlns="http://schemas.microsoft.com/win ...
- 20155207 《网络对抗》exp4 恶意代码分析 学习总结
20155207 <网络对抗> 恶意代码分析 学习总结 实践目标 1.是监控你自己系统的运行状态,看有没有可疑的程序在运行. 2.是分析一个恶意软件,就分析Exp2或Exp3中生成后门软件 ...
- 20155338课程设计个人报告——基于ARM实验箱的Android交友软件的设计与实现
课程设计个人报告--基于ARM实验箱的Android交友软件的设计与实现 个人贡献 实验环境的搭建 代码调试 在电脑上成功运行 研究程序代码撰写小组报告 一.实验环境 1.Eclipse软件开发环境: ...
- Educational Codeforces Round 41 (Rated for Div. 2)(A~D)
由于之前打过了这场比赛的E题,而后面两道题太难,所以就手速半个多小时A了前4题. 就当练手速吧,不过今天除了C题数组开小了以外都是1A A Tetris 题意的抽象解释可以在Luogu里看一下(话说现 ...
- mac终端将本地代码push到github总结
1.创建一个github账号 2.在本地目录下创建一个本地仓库,用来存放代码 mkdir prepass_repository (/Users/gejuncheng/文件/prepass_reposi ...
- LOJ#6354. 「CodePlus 2018 4 月赛」最短路[最短路优化建图]
题意 一个 \(n\) 个点的完全图,两点之间的边权为 \((i\ xor\ j)*C\) ,同时有 \(m\) 条额外单向路径,问从 \(S\) 到 \(T\) 的最短路. \(n\leq 10^5 ...
- 一、Django前后端交互之Ajax和跨域问题
一.Ajax介绍 1.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Jav ...