DIV+CSS+JS 实现黑客帝国字符雨特效
[i=s] 本帖最后由 aa77dd@163.com 于 2015-7-24 01:18 编辑 [/i]请将下面代码保存为 HTML 文件运行, 本代码在最新版 Chrome 和 Firefox 浏览器中测试通过, 未考虑低版本浏览器(特别是IE)的兼容性
演示地址 [url=http://a7d.net46.net/matrix.html]http://a7d.net46.net/matrix.html[/url][code]<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: content-box;
}
#pg {
position: absolute;
width: 100%;
height: 100%;
font-size: 0px;
background-color: black;
overflow: hidden;
}
#pg>div {
display: inline-block;
text-align: center;
position: absolute;
width: 1em;
line-height: 1em;
height: 100%;
color: green;
font-size: 15px;
font-weight: bold;
}
a {
color: #eeffee;
font-weight: bold;
}
</style>
</head>
<body>
<div id=pg>
<div></div>
</div>
<audio>
<source src="http://pisa.ucsd.edu/cse125/2001/cse190g1/matrix4.mp3" type="audio/mpeg">
</audio>
</body>
</html>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- <script src="JS/jquery-1.10.2.min.js"></script> -->
<script>
$('audio')[0].play();
// $('#pg>div').css("height", $('#pg').css("height"));
$('#pg>div').height($('#pg').height());
var wid = $("#pg>div").width();
var sum = Math.ceil($('#pg').width() / wid);
$('#pg').html(new Array(sum + 1).join("<div></div>"));
var t_life = Array(sum + 1).join(0).split('');
var life = [], hei = [], Yg = [], Yc = [], Y_born = [];
$("#pg>div").map(function (index) {
$(this).css("left", (wid * index) + 'px');
});
var hei_page = Math.ceil($("#pg>div").height() / wid);
var full_blank = Array(hei_page + 1).join(' <br>');
window.setInterval('tick();', 30);
function tick() {
$("#pg>div").map(function (i) {
if (+t_life[i] <= 0) {
$(this).html(full_blank);
hei[i] = Math.round(Math.random() * (hei_page - 2) + 2);
Yg[i] = Yc[i] = Y_born[i] = Math.round(Math.random() * (hei_page - hei[i]));
life[i] = Math.round(Math.random() * (hei[i] - 2) + 2);
t_life[i] = hei[i] + life[i];
}
t_life[i]--, life[i]--, hei[i]--;
var t, j;
if (life[i] < 0) {
t = $(this).html();
j = Yc[i] * 5, $(this).html(t.slice(0, j) + ' ' + t.slice(j + 1));
Yc[i]++;
}
if (hei[i] >= 0) {
t = $(this).html();
var drill = '<a>' + (Math.random() < .1 ? ' ' : String.fromCharCode(Math.round(Math.random() * 25 + 'A'.charCodeAt(0)))) + '</a>';
if (Yg[i] == Y_born[i]) {
$(this).html(t.slice(0, Yg[i] * 5) + drill);
} else {
j = (Yg[i] - 1) * 5, $(this).html(t.slice(0, j) + t.substr(j + 3, 1) + '<br>' + drill);
}
Yg[i]++;
} else if (hei[i] == -1) {
t = $(this).html();
j = (Yg[i] - 1) * 5, $(this).html(t.slice(0, j) + t.substr(j + 3, 1));
}
});
}
</script>[/code] 能不能加个背景,比如数码雨后面显示一行字或是一张图片? 效果很赞!
IE6表示看不懂CSS3。 [i=s] 本帖最后由 yu2n 于 2015-7-23 23:58 编辑 [/i]
{:3_57:}我也草草写了一个,另一种效果……
目前浏览器兼容较好,Chrome表示流畅运行,IE6表示可以运行,IPhone5表示流畅运行,小米2S自带浏览器略卡顿……
[quote]温馨提示:浏览器开小窗口运行会比较流畅,高清显示器2K、4K的,不要嫌卡……莫怪我,要怪就怪显卡、CPU吧……{:3_67:}[/quote]
整体来说,程序待优化,运行效率比较低……
预览:[url]http://yu2n.sinaapp.com/file/test/rain/rain.htm[/url][code]<!doctype html>
<html lang="cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Rain [By Yu2n 2015.07.23 R1]</title>
<!-- <script type="text/javascript" src="jquery-1.9.1.js"></script> -->
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript"><!--
window.onload=function(){
var min_str_len = 2; //雨丝字符串最小长度
var max_str_len = 20; //雨丝字符串最大长度
var font_size = 16; //雨丝字符大小
//创建展示区
$('body').append('<div id="paper"><div>');
$('#paper').width($(document).width());
$('#paper').height($(document).height());
var paper_height = $('#paper').height();
var paper_width = $('#paper').width();
//在显示区画板上方创建两个画板,三个画板竖直堆放
/*
┌───────────────┐
│ 准备区(隐藏) │ ↓↓
├───────────────┤
│ 移入区(隐藏) │ ↓↓ 循环即成下雨效果
├───────────────┤
│ 展示区(显现) │ ↓↓
└───────────────┘
*/
var verti_line_count = Math.ceil(paper_width / (font_size + 2)); //取得雨丝条数
$('#paper').append(new Array(2 * verti_line_count + 1).join("<span></span>")); //将雨丝填满准备区+移入区
var verti_line_width = Math.ceil(paper_width / verti_line_count); //取得雨丝宽度
$('#paper>span').map(function(index){
var text = generateMixed(parseInt(Math.random() * (max_str_len - min_str_len + 1) + min_str_len)); //设置雨丝文字(随机)
$(this).text(text);
if (index < verti_line_count){
//调整移入区雨丝位置
var top = parseInt(Math.random() * (paper_height - 2 + 1) + 2); //设置雨丝随机高度
$(this).css("top", -paper_height - top + 'px');
$(this).css("left", verti_line_width * index + 'px');
} else {
//调整准备区雨丝位置
var top = $('#paper>span:eq('+ (index - verti_line_count) + ')').css("top").slice(0,-2) * 1;
var left = $('#paper>span:eq('+ (index - verti_line_count) + ')').css("left").slice(0,-2) * 1;
$(this).css("top", -paper_height + top + 'px');
$(this).css("left", left + 'px');
}
//设置雨丝文字字体大小
$(this).css("font-size", font_size);
});
//修改雨丝文字,并着色
var setTxt = function(o){
//如果雨丝没有接触到展示区,则不执行后续动作
if ($(o).css("top").slice(0,-2) * 1 < -paper_height) return false;
//if ($(o).children("font:last").css("top").slice(0,-2) * 1 <= 0) return false;
//格式化文字,清除空格
var text=$(o).text().replace(/\s/igm,''), html='';
//随机文字
text = generateMixed(text.length);
for (var i=0; i<=text.length-1; i++){
if (i==text.length-1) {
//首个文字,设置亮色
html += '<font color="#00FF00">' + text.charAt(i) + '</font><br/>';
} else {
//其他文字,调整颜色深度
var nColor = parseInt('0x11', 16) + Math.ceil(parseInt('0xAA', 16) * (i) /text.length);
var sColor = ('00' + nColor.toString(16)).substr(-2);
html += '<font color="#00' + sColor + '00">' + text.charAt(i) + '</font><br/>';
}
}
$(o).html(html);
}
//雨丝下落
var move = function(o){
//向下移动,每次 20px
var top = ($(o).css("top").slice(0,-2) * 1 + 25) + 'px';
$(o).css("top", top);
//如果雨丝落出展示区,则将其移到准备区,并重置雨丝长度
if ($(o).css("top").slice(0,-2) * 1 > paper_height){
var top = $(o).css("top").slice(0,-2) * 1 - (paper_height * 2);
var text = generateMixed(parseInt(Math.random() * (max_str_len - min_str_len + 1) + min_str_len)); //设置雨丝文字(随机)
$(o).css("top", top);
$(o).text(text);
setTxt(o);
//$(o).css("height", (text.length+2)+'em');
};
};
//重复雨丝下落动作
setInterval(function(){
$('#paper>span').map(function(index){
//if ((new Date()).getMilliseconds() % 2==0) setTxt(this); //降低CPU使用率
move(this);
setTxt(this);
});
}, 50);
}
//生成随机数
function GetRandomNum(Min, Max){
return(parseInt(Math.random() * (Max - Min + 1) + Min));
}
//生成随机字符串
function generateMixed(n) {
var str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ', res = "";
for(var i=0; i<n; i++){res += str.charAt(parseInt(Math.random() *str.length +1) -1);}
return res;
}
--></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#paper {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
font-size: 0px;
overflow: hidden;
background-color: #000000;
}
#paper span {
position: absolute;
display: inline-block;
word-break: break-all;
text-align: center;
width: 1em;
line-height: 1em;
height: 100%;
color: black;
/*background-color: #FFFFFF;*/
border:0px solid Silver;
font-size: 15px;
font-weight: bold;
}
</style>
</head>
<body>
</body>
</html>[/code] 分享一个老的吧 HTML5 canvas 技术的
作者: Shaun Dunne
[url=http://cssdeck.com/labs/the-matrix]http://cssdeck.com/labs/the-matrix[/url]
代码很简洁, 低版 IE 就不演了[code]<!DOCTYPE html>
<html><head></head><body><canvas id="q"></canvas></body></html>
<script>
var s = window.screen;
var width = q.width = s.width;
var height = q.height = s.height;
var letters = Array(256).join(1).split('');
var draw = function () {
q.getContext('2d').fillStyle = 'rgba(0,0,0,.05)';
q.getContext('2d').fillRect(0, 0, width, height);
q.getContext('2d').fillStyle = '#0F0';
letters.map(function (y_pos, index) {
text = String.fromCharCode(/*3e4*/ 65 + Math.random() * 33);
x_pos = index * 10;
q.getContext('2d').fillText(text, x_pos, y_pos);
letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0 : y_pos + 10;
});
};
setInterval(draw, 33);
</script>[/code] 有没有3D的? [i=s] 本帖最后由 523066680 于 2016-10-4 17:58 编辑 [/i]
但从效果上说(因为我不懂js html css),第一个还可以,第二三个例子偏卡。这方面GL更合适
(我记得以前UBUNTU下面有个黑客帝国数码雨的屏保,相当溜) [i=s] 本帖最后由 yu2n 于 2016-10-6 18:17 编辑 [/i]
[b]回复 [url=http://www.bathome.net/redirect.php?goto=findpost&pid=191331&ptid=36578]7#[/url] [i]523066680[/i] [/b]
JS 操作 DOM 做这种效果真的很卡。无聊又写了一个,不用 DIV,用 TABLE,反正一样慢……(支持老IE)
[quote]CURRENCY SYMBOL By Yu2n
[url]http://yu2n.qiniudn.com/app/show/rain_money.html[/url]
[/quote] [i=s] 本帖最后由 523066680 于 2016-10-6 18:34 编辑 [/i]
[b]回复 [url=http://bbs.bathome.net/redirect.php?goto=findpost&pid=191388&ptid=36578]8#[/url] [i]yu2n[/i] [/b]
效果很好,可以想办法做一个这样的。 我也准备做,但是估计要拖很久 :lol
[img]http://imgout.ph.126.net/52290073/matrix.jpg[/img] [i=s] 本帖最后由 aa77dd@163.com 于 2016-10-6 19:01 编辑 [/i]
[b]回复 [url=http://bbs.bathome.net/redirect.php?goto=findpost&pid=191389&ptid=36578]9#[/url] [i]523066680[/i] [/b]
HTML 5 也很好玩的
下面的都不是我做的
我不时逛下 codepen
单纯用 css 都能做特效
[url]http://codepen.io/jlong/pen/wciCv[/url]
再来个 3D 的
[url]http://codepen.io/leemark/pen/LfiKh[/url]
这个题材应该是很多人感兴趣的
site:codepen.io matrix [b]回复 [url=http://bbs.bathome.net/redirect.php?goto=findpost&pid=191390&ptid=36578]10#[/url] [i]aa77dd@163.com[/i] [/b]
网页方面我也准备走 Html5 Canvas + WebGL 方向
如果,有时间的话。 [b]回复 [url=http://www.bathome.net/redirect.php?goto=findpost&pid=198758&ptid=36578]11#[/url] [i]523066680[/i] [/b]
准备搞 WebGL 啦?那以后估计要多请教你了 [i=s] 本帖最后由 523066680 于 2017-4-27 09:44 编辑 [/i]
[b]回复 [url=http://bbs.bathome.net/redirect.php?goto=findpost&pid=198761&ptid=36578]12#[/url] [i]CrLf[/i] [/b]
我这样业余学真的不够看,有时候一样东西还没学会就淘汰了,严重打击自信心。
特别是GL从固定管线转到可编程渲染管线的那次过渡。不过好在,WebGL 不用在环境搭建上花费太多心思,浏览器走起。 [i=s] 本帖最后由 523066680 于 2017-7-10 19:42 编辑 [/i]
[b]回复 [url=http://bbs.bathome.net/redirect.php?goto=findpost&pid=191390&ptid=36578]10#[/url] [i]aa77dd@163.com[/i] [/b]
几个经过封装的Web 3D 图形框架(基于WebGL)
PhiloGL
[url]http://www.senchalabs.org/philogl/[/url]
示例
[url]http://www.senchalabs.org/philogl/demos.html[/url]
Oak3D
[url]http://www.effecthub.com/t/oak3d[/url]
Three.js
[url]https://threejs.org/[/url]
示例 ASCII_effect
[url]https://threejs.org/examples/#canvas_ascii_effect[/url]
Three.js 下载的examples 效果非常不错,但是有些示例明显卡顿,有些示例看代码后感觉学习成本也省不到哪里去。 [b]回复 [url=http://www.bathome.net/redirect.php?goto=findpost&pid=201123&ptid=36578]14#[/url] [i]523066680[/i] [/b]
还是纯C给力,js是脚本语言,反应慢的要命。
页:
[1]