批处理之家's Archiver

aa77dd@163.com 发表于 2015-7-20 22:45

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]

牛虻 发表于 2015-7-21 14:54

能不能加个背景，比如数码雨后面显示一行字或是一张图片？

yu2n 发表于 2015-7-21 14:55

效果很赞！

IE6表示看不懂CSS3。

yu2n 发表于 2015-7-23 23:36

[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]

aa77dd@163.com 发表于 2015-7-24 00:28

分享一个老的吧     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]

牛虻 发表于 2015-7-24 11:02

有没有3D的？

523066680 发表于 2016-10-4 17:19

[i=s] 本帖最后由 523066680 于 2016-10-4 17:58 编辑 [/i]

但从效果上说（因为我不懂js html css)，第一个还可以，第二三个例子偏卡。这方面GL更合适
（我记得以前UBUNTU下面有个黑客帝国数码雨的屏保，相当溜）

yu2n 发表于 2016-10-6 18:03

[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]

523066680 发表于 2016-10-6 18:31

[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]

aa77dd@163.com 发表于 2016-10-6 18:59

[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

523066680 发表于 2017-4-26 21:33

[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 方向

如果，有时间的话。

CrLf 发表于 2017-4-26 22:11

[b]回复 [url=http://www.bathome.net/redirect.php?goto=findpost&pid=198758&ptid=36578]11#[/url] [i]523066680[/i] [/b]


    准备搞 WebGL 啦？那以后估计要多请教你了

523066680 发表于 2017-4-27 09:40

[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 不用在环境搭建上花费太多心思，浏览器走起。

523066680 发表于 2017-7-10 19:25

[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 效果非常不错，但是有些示例明显卡顿，有些示例看代码后感觉学习成本也省不到哪里去。

happy886rr 发表于 2017-7-10 22:27

[b]回复 [url=http://www.bathome.net/redirect.php?goto=findpost&pid=201123&ptid=36578]14#[/url] [i]523066680[/i] [/b]
还是纯C给力，js是脚本语言，反应慢的要命。

页: [1]

Powered by Discuz! Archiver 7.2  © 2001-2009 Comsenz Inc.