Board logo

标题: [原创代码] DIV+CSS+JS 实现黑客帝国字符雨特效 [打印本页]

作者: aa77dd@163.com    时间: 2015-7-20 22:45     标题: DIV+CSS+JS 实现黑客帝国字符雨特效

本帖最后由 aa77dd@163.com 于 2015-7-24 01:18 编辑

请将下面代码保存为 HTML 文件运行, 本代码在最新版 Chrome 和 Firefox 浏览器中测试通过, 未考虑低版本浏览器(特别是IE)的兼容性
演示地址 http://a7d.net46.net/matrix.html
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. * {
  6.     margin: 0;
  7.     padding: 0;
  8.     box-sizing: content-box;
  9. }
  10. #pg {
  11.     position: absolute;
  12.     width: 100%;
  13.     height: 100%;
  14.     font-size: 0px;
  15.     background-color: black;
  16.     overflow: hidden;
  17. }
  18. #pg>div {
  19.     display: inline-block;
  20.     text-align: center;
  21.     position: absolute;
  22.     width: 1em;
  23.     line-height: 1em;
  24.     height: 100%;
  25.     color: green;
  26.     font-size: 15px;
  27.     font-weight: bold;
  28. }
  29. a {
  30.     color: #eeffee;
  31.     font-weight: bold;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36.     <div id=pg>
  37.         <div></div>
  38.     </div>
  39.     <audio>
  40.         <source src="http://pisa.ucsd.edu/cse125/2001/cse190g1/matrix4.mp3" type="audio/mpeg">
  41.     </audio>
  42. </body>
  43. </html>
  44. <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  45. <!-- <script src="JS/jquery-1.10.2.min.js"></script> -->
  46. <script>
  47.     $('audio')[0].play();
  48.     // $('#pg>div').css("height", $('#pg').css("height"));
  49.     $('#pg>div').height($('#pg').height());
  50.     var wid = $("#pg>div").width();
  51.     var sum = Math.ceil($('#pg').width() / wid);
  52.     $('#pg').html(new Array(sum + 1).join("<div></div>"));
  53.     var t_life = Array(sum + 1).join(0).split('');
  54.     var life = [], hei = [], Yg = [], Yc = [], Y_born = [];
  55.     $("#pg>div").map(function (index) {
  56.         $(this).css("left", (wid * index) + 'px');
  57.     });
  58.     var hei_page = Math.ceil($("#pg>div").height() / wid);
  59.     var full_blank = Array(hei_page + 1).join(' <br>');
  60.     window.setInterval('tick();', 30);
  61.     function tick() {
  62.         $("#pg>div").map(function (i) {
  63.             if (+t_life[i] <= 0) {
  64.                 $(this).html(full_blank);
  65.                 hei[i] = Math.round(Math.random() * (hei_page - 2) + 2);
  66.                 Yg[i] = Yc[i] = Y_born[i] = Math.round(Math.random() * (hei_page - hei[i]));
  67.                 life[i] = Math.round(Math.random() * (hei[i] - 2) + 2);
  68.                 t_life[i] = hei[i] + life[i];
  69.             }
  70.             t_life[i]--, life[i]--, hei[i]--;
  71.             var t, j;
  72.             if (life[i] < 0) {
  73.                 t = $(this).html();
  74.                 j = Yc[i] * 5, $(this).html(t.slice(0, j) + ' ' + t.slice(j + 1));
  75.                 Yc[i]++;
  76.             }
  77.             if (hei[i] >= 0) {
  78.                 t = $(this).html();
  79.                 var drill = '<a>' + (Math.random() < .1 ? ' ' : String.fromCharCode(Math.round(Math.random() * 25 + 'A'.charCodeAt(0)))) + '</a>';
  80.                 if (Yg[i] == Y_born[i]) {
  81.                     $(this).html(t.slice(0, Yg[i] * 5) + drill);
  82.                 } else {
  83.                     j = (Yg[i] - 1) * 5, $(this).html(t.slice(0, j) + t.substr(j + 3, 1) + '<br>' + drill);
  84.                 }
  85.                 Yg[i]++;
  86.             } else if (hei[i] == -1) {
  87.                 t = $(this).html();
  88.                 j = (Yg[i] - 1) * 5, $(this).html(t.slice(0, j) + t.substr(j + 3, 1));
  89.             }
  90.         });
  91.     }
  92. </script>
复制代码

作者: 牛虻    时间: 2015-7-21 14:54

能不能加个背景,比如数码雨后面显示一行字或是一张图片?
作者: yu2n    时间: 2015-7-21 14:55

效果很赞!

IE6表示看不懂CSS3。
作者: yu2n    时间: 2015-7-23 23:36

本帖最后由 yu2n 于 2015-7-23 23:58 编辑

我也草草写了一个,另一种效果……

目前浏览器兼容较好,Chrome表示流畅运行,IE6表示可以运行,IPhone5表示流畅运行,小米2S自带浏览器略卡顿……
温馨提示:浏览器开小窗口运行会比较流畅,高清显示器2K、4K的,不要嫌卡……莫怪我,要怪就怪显卡、CPU吧……


整体来说,程序待优化,运行效率比较低……

预览:http://yu2n.sinaapp.com/file/test/rain/rain.htm
  1. <!doctype html>
  2. <html lang="cn">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5. <title>Rain [By Yu2n 2015.07.23 R1]</title>
  6. <!-- <script type="text/javascript" src="jquery-1.9.1.js"></script> -->
  7. <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
  8. <script type="text/javascript"><!--
  9. window.onload=function(){
  10.   
  11.   var min_str_len = 2;    //雨丝字符串最小长度
  12.   var max_str_len = 20;   //雨丝字符串最大长度
  13.   var font_size = 16;     //雨丝字符大小
  14.   //创建展示区
  15.   $('body').append('<div id="paper"><div>');
  16.   $('#paper').width($(document).width());
  17.   $('#paper').height($(document).height());
  18.   var paper_height = $('#paper').height();
  19.   var paper_width = $('#paper').width();
  20.   
  21.   //在显示区画板上方创建两个画板,三个画板竖直堆放
  22.   /*
  23.     ┌───────────────┐
  24.     │ 准备区(隐藏)  │  ↓↓
  25.     ├───────────────┤
  26.     │ 移入区(隐藏)  │  ↓↓  循环即成下雨效果
  27.     ├───────────────┤
  28.     │ 展示区(显现)  │  ↓↓
  29.     └───────────────┘
  30.   */
  31.   var verti_line_count = Math.ceil(paper_width / (font_size + 2));    //取得雨丝条数
  32.   $('#paper').append(new Array(2 * verti_line_count + 1).join("<span></span>"));  //将雨丝填满准备区+移入区
  33.   var verti_line_width = Math.ceil(paper_width / verti_line_count);   //取得雨丝宽度
  34.   $('#paper>span').map(function(index){
  35.     var text = generateMixed(parseInt(Math.random() * (max_str_len - min_str_len + 1) + min_str_len));  //设置雨丝文字(随机)
  36.     $(this).text(text);
  37.     if (index < verti_line_count){
  38.       //调整移入区雨丝位置
  39.       var top = parseInt(Math.random() * (paper_height - 2 + 1) + 2);   //设置雨丝随机高度
  40.       $(this).css("top", -paper_height - top + 'px');
  41.       $(this).css("left", verti_line_width * index + 'px');
  42.     } else {
  43.       //调整准备区雨丝位置
  44.       var top  = $('#paper>span:eq('+ (index - verti_line_count) + ')').css("top").slice(0,-2) * 1;
  45.       var left = $('#paper>span:eq('+ (index - verti_line_count) + ')').css("left").slice(0,-2) * 1;
  46.       $(this).css("top", -paper_height + top + 'px');
  47.       $(this).css("left", left + 'px');
  48.     }
  49.     //设置雨丝文字字体大小
  50.     $(this).css("font-size", font_size);
  51.   });
  52.   //修改雨丝文字,并着色
  53.   var setTxt = function(o){
  54.    
  55.     //如果雨丝没有接触到展示区,则不执行后续动作
  56.     if ($(o).css("top").slice(0,-2) * 1 < -paper_height) return false;
  57.     //if ($(o).children("font:last").css("top").slice(0,-2) * 1 <= 0) return false;
  58.    
  59.     //格式化文字,清除空格
  60.     var text=$(o).text().replace(/\s/igm,''), html='';
  61.    
  62.     //随机文字
  63.     text = generateMixed(text.length);
  64.     for (var i=0; i<=text.length-1; i++){
  65.       if (i==text.length-1) {
  66.         //首个文字,设置亮色
  67.         html += '<font color="#00FF00">' + text.charAt(i) + '</font><br/>';
  68.       } else {
  69.         //其他文字,调整颜色深度
  70.         var nColor = parseInt('0x11', 16) + Math.ceil(parseInt('0xAA', 16) * (i) /text.length);
  71.         var sColor = ('00' + nColor.toString(16)).substr(-2);
  72.         html += '<font color="#00' + sColor + '00">' + text.charAt(i) + '</font><br/>';
  73.       }
  74.     }
  75.     $(o).html(html);
  76.   }
  77.   
  78.   //雨丝下落
  79.   var move = function(o){
  80.     //向下移动,每次 20px
  81.     var top = ($(o).css("top").slice(0,-2) * 1 + 25)  + 'px';
  82.     $(o).css("top", top);
  83.    
  84.     //如果雨丝落出展示区,则将其移到准备区,并重置雨丝长度
  85.     if ($(o).css("top").slice(0,-2) * 1 > paper_height){
  86.       var top = $(o).css("top").slice(0,-2) * 1 - (paper_height * 2);
  87.       var text = generateMixed(parseInt(Math.random() * (max_str_len - min_str_len + 1) + min_str_len));  //设置雨丝文字(随机)
  88.       $(o).css("top", top);
  89.       $(o).text(text);
  90.       setTxt(o);
  91.       //$(o).css("height", (text.length+2)+'em');
  92.     };
  93.   };
  94.   
  95.   //重复雨丝下落动作
  96.   setInterval(function(){
  97.     $('#paper>span').map(function(index){
  98.       //if ((new Date()).getMilliseconds() % 2==0) setTxt(this); //降低CPU使用率
  99.       move(this);
  100.       setTxt(this);
  101.     });
  102.   }, 50);
  103.   
  104. }
  105. //生成随机数
  106. function GetRandomNum(Min, Max){
  107.   return(parseInt(Math.random() * (Max - Min + 1) + Min));  
  108. }
  109. //生成随机字符串
  110. function generateMixed(n) {
  111.   var str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ', res = "";
  112.   for(var i=0; i<n; i++){res += str.charAt(parseInt(Math.random() *str.length +1) -1);}
  113.   return res;
  114. }
  115. --></script>
  116. <style type="text/css">
  117. * {
  118.   margin: 0;
  119.   padding: 0;
  120. }
  121. body {
  122.   margin: 0;
  123.   padding: 0;
  124.   top: 0px;
  125.   left: 0px;
  126.   width: 100%;
  127.   height: 100%;
  128. }
  129. #paper {
  130.   position: absolute;
  131.   top: 0px;
  132.   left: 0px;
  133.   width: 100%;
  134.   height: 100%;
  135.   font-size: 0px;
  136.   overflow: hidden;
  137.   background-color: #000000;
  138. }
  139. #paper span {
  140.   position: absolute;
  141.   display: inline-block;
  142.   word-break: break-all;
  143.   text-align: center;
  144.   width: 1em;
  145.   line-height: 1em;
  146.   height: 100%;
  147.   color: black;
  148.   /*background-color: #FFFFFF;*/
  149.   border:0px solid Silver;
  150.   font-size: 15px;
  151.   font-weight: bold;
  152. }
  153. </style>
  154. </head>
  155. <body>
  156. </body>
  157. </html>
复制代码

作者: aa77dd@163.com    时间: 2015-7-24 00:28

分享一个老的吧     HTML5 canvas 技术的
作者: Shaun Dunne
http://cssdeck.com/labs/the-matrix

代码很简洁, 低版 IE 就不演了
  1. <!DOCTYPE html>
  2. <html><head></head><body><canvas id="q"></canvas></body></html>
  3. <script>
  4. var s = window.screen;
  5. var width = q.width = s.width;
  6. var height = q.height = s.height;
  7. var letters = Array(256).join(1).split('');
  8. var draw = function () {
  9.     q.getContext('2d').fillStyle = 'rgba(0,0,0,.05)';
  10.     q.getContext('2d').fillRect(0, 0, width, height);
  11.     q.getContext('2d').fillStyle = '#0F0';
  12.     letters.map(function (y_pos, index) {
  13.         text = String.fromCharCode(/*3e4*/ 65 + Math.random() * 33);
  14.         x_pos = index * 10;
  15.         q.getContext('2d').fillText(text, x_pos, y_pos);
  16.         letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0 : y_pos + 10;
  17.     });
  18. };
  19. setInterval(draw, 33);
  20. </script>
复制代码

作者: 牛虻    时间: 2015-7-24 11:02

有没有3D的?
作者: 523066680    时间: 2016-10-4 17:19

本帖最后由 523066680 于 2016-10-4 17:58 编辑

但从效果上说(因为我不懂js html css),第一个还可以,第二三个例子偏卡。这方面GL更合适
(我记得以前UBUNTU下面有个黑客帝国数码雨的屏保,相当溜)
作者: yu2n    时间: 2016-10-6 18:03

本帖最后由 yu2n 于 2016-10-6 18:17 编辑

回复 7# 523066680


    JS 操作 DOM 做这种效果真的很卡。无聊又写了一个,不用 DIV,用 TABLE,反正一样慢……(支持老IE)
CURRENCY SYMBOL By Yu2n
http://yu2n.qiniudn.com/app/show/rain_money.html

作者: 523066680    时间: 2016-10-6 18:31

本帖最后由 523066680 于 2016-10-6 18:34 编辑

回复 8# yu2n


    效果很好,可以想办法做一个这样的。 我也准备做,但是估计要拖很久


作者: aa77dd@163.com    时间: 2016-10-6 18:59

本帖最后由 aa77dd@163.com 于 2016-10-6 19:01 编辑

回复 9# 523066680

HTML 5 也很好玩的

下面的都不是我做的
我不时逛下 codepen

单纯用 css 都能做特效
http://codepen.io/jlong/pen/wciCv

再来个 3D 的
http://codepen.io/leemark/pen/LfiKh

这个题材应该是很多人感兴趣的
site:codepen.io matrix
作者: 523066680    时间: 2017-4-26 21:33

回复 10# aa77dd@163.com

网页方面我也准备走  Html5 Canvas + WebGL 方向

如果,有时间的话。
作者: CrLf    时间: 2017-4-26 22:11

回复 11# 523066680


    准备搞 WebGL 啦?那以后估计要多请教你了
作者: 523066680    时间: 2017-4-27 09:40

本帖最后由 523066680 于 2017-4-27 09:44 编辑

回复 12# CrLf

      我这样业余学真的不够看,有时候一样东西还没学会就淘汰了,严重打击自信心。
特别是GL从固定管线转到可编程渲染管线的那次过渡。不过好在,WebGL 不用在环境搭建上花费太多心思,浏览器走起。
作者: 523066680    时间: 2017-7-10 19:25

本帖最后由 523066680 于 2017-7-10 19:42 编辑

回复 10# aa77dd@163.com

几个经过封装的Web 3D 图形框架(基于WebGL)

PhiloGL
http://www.senchalabs.org/philogl/
示例
http://www.senchalabs.org/philogl/demos.html

Oak3D
http://www.effecthub.com/t/oak3d

Three.js
https://threejs.org/
示例 ASCII_effect
https://threejs.org/examples/#canvas_ascii_effect

Three.js 下载的examples 效果非常不错,但是有些示例明显卡顿,有些示例看代码后感觉学习成本也省不到哪里去。
作者: happy886rr    时间: 2017-7-10 22:27

回复 14# 523066680
还是纯C给力,js是脚本语言,反应慢的要命。




欢迎光临 批处理之家 (http://www.bathome.net/) Powered by Discuz! 7.2