首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果

Posted in Javascript onMarch 17, 2020

先看看JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落最终效果：

JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果

HTML代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/ok.css" rel="external nofollow" >
<title>code by-zhenyu.sha</title>
</head>
 
<body>
<canvas id="canvas"></canvas>
</body>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="http://neilcarpenter.com/demos/canvas/matrix/stats.min.js"></script>
<script type="text/javascript" src="js/ok.js"></script>
</html>

js代码：

(function() {
  var lastTime = 0;
  var vendors = ['ms', 'moz', 'webkit', 'o'];
  for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
    window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||
      window[vendors[x] + 'CancelRequestAnimationFrame'];
  }
  if (!window.requestAnimationFrame)
    window.requestAnimationFrame = function(callback, element) {
      var currTime = new Date().getTime();
      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
      var id = window.setTimeout(function() {
          callback(currTime + timeToCall);
        },
        timeToCall);
      lastTime = currTime + timeToCall;
      return id;
    };
  if (!window.cancelAnimationFrame)
    window.cancelAnimationFrame = function(id) {
      clearTimeout(id);
    };
}());
// stats
var stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
var M = {
  settings: {
    COL_WIDTH: 20,
    COL_HEIGHT: 25,
    VELOCITY_PARAMS: {
      min: 4,
      max: 8
    },
    CODE_LENGTH_PARAMS: {
      min: 20,
      max: 40
    }
  },
  animation: null,
  c: null,
  ctx: null,
  lineC: null,
  ctx2: null,
  WIDTH: window.innerWidth,
  HEIGHT: window.innerHeight,
  COLUMNS: null,
  canvii: [],
  font: '30px matrix-code',
  letters: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '$', '+', '-', '*', '/', '=', '%', '"', '\'', '#', '&', '_', '(', ')', ',', '.', ';', ':', '?', '!', '\\', '|', '{', '}', '<', '>', '[', ']', '^', '~'],
  codes: [],
  createCodeLoop: null,
  codesCounter: 0,
  init: function() {
    M.c = document.getElementById('canvas');
    M.ctx = M.c.getContext('2d');
    M.c.width = M.WIDTH;
    M.c.height = M.HEIGHT;
    M.ctx.shadowBlur = 0;
    M.ctx.fillStyle = '#000';
    M.ctx.fillRect(0, 0, M.WIDTH, M.HEIGHT);
    M.ctx.font = M.font;
    M.COLUMNS = Math.ceil(M.WIDTH / M.settings.COL_WIDTH);
    for (var i = 0; i < M.COLUMNS; i++) {
      M.codes[i] = [];
      M.codes[i][0] = {
        'open': true,
        'position': {
          'x': 0,
          'y': 0
        },
        'strength': 0
      };
    }
    M.loop();
    M.createLines();
    M.createCode();
    // not doing this, kills CPU
    // M.swapCharacters();
    window.onresize = function() {
      window.cancelAnimationFrame(M.animation);
      M.animation = null;
      M.ctx.clearRect(0, 0, M.WIDTH, M.HEIGHT);
      M.codesCounter = 0;
      M.ctx2.clearRect(0, 0, M.WIDTH, M.HEIGHT);
      M.WIDTH = window.innerWidth;
      M.HEIGHT = window.innerHeight;
      M.init();
    };
  },
  loop: function() {
    M.animation = requestAnimationFrame(function() {
      M.loop();
    });
    M.draw();
    stats.update();
  },
  draw: function() {
    var velocity, height, x, y, c, ctx;
    // slow fade BG colour
    M.ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
    M.ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
    M.ctx.fillRect(0, 0, M.WIDTH, M.HEIGHT);
    M.ctx.globalCompositeOperation = 'source-over';
    for (var i = 0; i < M.COLUMNS; i++) {
      // check member of array isn't undefined at this point
      if (M.codes[i][0].canvas) {
        velocity = M.codes[i][0].velocity;
        height = M.codes[i][0].canvas.height;
        x = M.codes[i][0].position.x;
        y = M.codes[i][0].position.y - height;
        c = M.codes[i][0].canvas;
        ctx = c.getContext('2d');
        M.ctx.drawImage(c, x, y, M.settings.COL_WIDTH, height);
        if ((M.codes[i][0].position.y - height) < M.HEIGHT) {
          M.codes[i][0].position.y += velocity;
        } else {
          M.codes[i][0].position.y = 0;
        }
      }
    }
  },
  createCode: function() {
    if (M.codesCounter > M.COLUMNS) {
      clearTimeout(M.createCodeLoop);
      return;
    }
    var randomInterval = M.randomFromInterval(0, 100);
    var column = M.assignColumn();
    if (column) {
      var codeLength = M.randomFromInterval(M.settings.CODE_LENGTH_PARAMS.min, M.settings.CODE_LENGTH_PARAMS.max);
      var codeVelocity = (Math.random() * (M.settings.VELOCITY_PARAMS.max - M.settings.VELOCITY_PARAMS.min)) + M.settings.VELOCITY_PARAMS.min;
      var lettersLength = M.letters.length;
      M.codes[column][0].position = {
        'x': (column * M.settings.COL_WIDTH),
        'y': 0
      };
      M.codes[column][0].velocity = codeVelocity;
      M.codes[column][0].strength = M.codes[column][0].velocity / M.settings.VELOCITY_PARAMS.max;
      for (var i = 1; i <= codeLength; i++) {
        var newLetter = M.randomFromInterval(0, (lettersLength - 1));
        M.codes[column][i] = M.letters[newLetter];
      }
      M.createCanvii(column);
      M.codesCounter++;
    }
    M.createCodeLoop = setTimeout(M.createCode, randomInterval);
  },
  createCanvii: function(i) {
    var codeLen = M.codes[i].length - 1;
    var canvHeight = codeLen * M.settings.COL_HEIGHT;
    var velocity = M.codes[i][0].velocity;
    var strength = M.codes[i][0].strength;
    var text, fadeStrength;
    var newCanv = document.createElement('canvas');
    var newCtx = newCanv.getContext('2d');
    newCanv.width = M.settings.COL_WIDTH;
    newCanv.height = canvHeight;
    for (var j = 1; j < codeLen; j++) {
      text = M.codes[i][j];
      newCtx.globalCompositeOperation = 'source-over';
      newCtx.font = '30px matrix-code';
      if (j < 5) {
        newCtx.shadowColor = 'hsl(104, 79%, 74%)';
        newCtx.shadowOffsetX = 0;
        newCtx.shadowOffsetY = 0;
        newCtx.shadowBlur = 10;
        newCtx.fillStyle = 'hsla(104, 79%, ' + (100 - (j * 5)) + '%, ' + strength + ')';
      } else if (j > (codeLen - 4)) {
        fadeStrength = j / codeLen;
        fadeStrength = 1 - fadeStrength;
        newCtx.shadowOffsetX = 0;
        newCtx.shadowOffsetY = 0;
        newCtx.shadowBlur = 0;
        newCtx.fillStyle = 'hsla(104, 79%, 74%, ' + (fadeStrength + 0.3) + ')';
      } else {
        newCtx.shadowOffsetX = 0;
        newCtx.shadowOffsetY = 0;
        newCtx.shadowBlur = 0;
        newCtx.fillStyle = 'hsla(104, 79%, 74%, ' + strength + ')';
      }
      newCtx.fillText(text, 0, (canvHeight - (j * M.settings.COL_HEIGHT)));
    }
    M.codes[i][0].canvas = newCanv;
  },
  swapCharacters: function() {
    var randomCodeIndex;
    var randomCode;
    var randomCodeLen;
    var randomCharIndex;
    var newRandomCharIndex;
    var newRandomChar;
    for (var i = 0; i < 20; i++) {
      randomCodeIndex = M.randomFromInterval(0, (M.codes.length - 1));
      randomCode = M.codes[randomCodeIndex];
      randomCodeLen = randomCode.length;
      randomCharIndex = M.randomFromInterval(2, (randomCodeLen - 1));
      newRandomCharIndex = M.randomFromInterval(0, (M.letters.length - 1));
      newRandomChar = M.letters[newRandomCharIndex];
      randomCode[randomCharIndex] = newRandomChar;
    }
    M.swapCharacters();
  },
  createLines: function() {
    M.linesC = document.createElement('canvas');
    M.linesC.width = M.WIDTH;
    M.linesC.height = M.HEIGHT;
    M.linesC.style.position = 'absolute';
    M.linesC.style.top = 0;
    M.linesC.style.left = 0;
    M.linesC.style.zIndex = 10;
    document.body.appendChild(M.linesC);
    var linesYBlack = 0;
    var linesYWhite = 0;
    M.ctx2 = M.linesC.getContext('2d');
    M.ctx2.beginPath();
    M.ctx2.lineWidth = 1;
    M.ctx2.strokeStyle = 'rgba(0, 0, 0, 0.7)';
    while (linesYBlack < M.HEIGHT) {
      M.ctx2.moveTo(0, linesYBlack);
      M.ctx2.lineTo(M.WIDTH, linesYBlack);
      linesYBlack += 5;
    }
    M.ctx2.lineWidth = 0.15;
    M.ctx2.strokeStyle = 'rgba(255, 255, 255, 0.7)';
    while (linesYWhite < M.HEIGHT) {
      M.ctx2.moveTo(0, linesYWhite + 1);
      M.ctx2.lineTo(M.WIDTH, linesYWhite + 1);
      linesYWhite += 5;
    }
    M.ctx2.stroke();
  },
  assignColumn: function() {
    var randomColumn = M.randomFromInterval(0, (M.COLUMNS - 1));
    if (M.codes[randomColumn][0].open) {
      M.codes[randomColumn][0].open = false;
    } else {
      return false;
    }
    return randomColumn;
  },
  randomFromInterval: function(from, to) {
    return Math.floor(Math.random() * (to - from + 1) + from);
  },
  snapshot: function() {
    window.open(M.c.toDataURL());
  }
};
function eventListenerz() {
  var controlToggles = document.getElementsByClassName('toggle-info');
  var controls = document.getElementById('info');
  var snapshotBtn = document.getElementById('snapshot');
  function toggleControls(e) {
    e.preventDefault();
    controls.className = controls.className === 'closed' ? '' : 'closed';
  }
  for (var j = 0; j < 2; j++) {
    controlToggles[j].addEventListener('click', toggleControls, false);
  }
  snapshotBtn.addEventListener('click', M.snapshot, false);
}
window.onload = function() {
  M.init();
  eventListenerz();
};

css代码：

@import url("http://fonts.googleapis.com/css?family=Carrois+Gothic");
@font-face {
  font-family: 'matrix-code';
  src: url('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.eot?#iefix') format('embedded-opentype'), url('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.woff') format('woff'), url('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.ttf') format('truetype'), url('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.svg#svgFontName') format('svg');
}
html,
body {
  -webkit-font-smoothing: antialiased;
  font: normal 12px/14px "Carrois Gothic", sans-serif;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  color: #fff;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
body {
  background: black;
}
#stats {
  z-index: 100;
}
#info {
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  bottom: 0;
  left: 0px;
  width: 250px;
  padding: 10px 20px 20px;
  z-index: 100;
  -webkit-transform-origin: bottom center;
  -moz-transform-origin: bottom center;
  -o-transform-origin: bottom center;
  transform-origin: bottom center;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: -webkit-transform .5s ease-in-out;
  -moz-transition: -moz-transform .5s ease-in-out;
  -o-transition: -o-transform .5s ease-in-out;
  transition: transform .5s ease-in-out;
}
#info.closed {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.toggle-info {
  position: absolute;
  display: block;
  height: 10px;
  background: rgba(0, 0, 0, 0.8);
  width: 290px;
  left: 0;
  text-align: center;
  padding: 3px 0 7px;
  text-decoration: none;
  color: white;
  text-shadow: none;
}
.toggle-info:hover {
  background: rgb(0, 0, 0);
}
#close {
  top: -20px;
}
#open {
  bottom: -20px;
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
}
button {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: 0;
  border-radius: 2px;
  padding: 7px 10px;
  box-shadow: 0 0 3px 0px rgba(255, 255, 255, 0.3);
  cursor: pointer;
}
button:hover {
  background: rgba(255, 255, 255, 0.1);
}
pa {
  color: #fff;
}
pa:hover {
  color: #EFFDEB;
  text-shadow: 0px 0px 5px #75AD61;
}

本文介绍了使用JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果的代码实例，更多JS特效请查看下面的相关链接

JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果

- Author -

沙振宇

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript document.referrer判断访客来源网址
May 15 Javascript
jQuery 选择器项目实例分析及实现代码
Dec 28 Javascript
多种方法判断Javascript对象是否存在
Sep 22 Javascript
将字符串中由空格隔开的每个单词首字母大写
Apr 06 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
多种js图片预加载实现方式分享
Feb 19 Javascript
web 前端常用组件之Layer弹出层组件
Sep 22 Javascript
详解vue-cli本地环境API代理设置和解决跨域
Sep 05 Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 Javascript
小程序日历控件使用方法详解
Dec 29 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
Aug 14 Javascript
JS+CSS实现动态时钟
Feb 19 Javascript
js实现简单点赞操作
Mar 17 #Javascript
vue+ESLint 配置保存 自动格式化代码
Mar 17 #Javascript
HTML+JS实现“代码雨”效果源码（黑客帝国文字下落效果）
Mar 17 #Javascript
JavaScript实现横版菜单栏
Mar 17 #Javascript
JavaScript实现留言板案例
Mar 17 #Javascript
es6函数之严格模式用法实例分析
Mar 17 #Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 #Javascript
优化(1) MIME(1) LOGO(1) 写入策略(1) 爬虫(2) 存储过程(3) redo log(1) binlog(2) 增删改查(2) 抖音(1)
You might like
Zerg剧情介绍
2020/03/14 星际争霸
php array_push()数组函数:将一个或多个单元压入数组的末尾（入栈）
2011/07/12 PHP
php多层数组与对象的转换实例代码
2013/08/05 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
php+resumablejs实现的分块上传 断点续传功能示例
2017/04/18 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
判断用户是否在线的代码
2011/03/05 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
JS读取XML文件示例代码
2013/11/15 Javascript
Javascript Objects详解
2014/09/04 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
JS实现元素上下左右移动效果
2017/10/18 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
详解vue-cli3使用
2018/08/14 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
微信小程序rich-text富文本用法实例分析
2019/05/20 Javascript
微信小程序版本自动更新的方法
2019/06/14 Javascript
在Linux下调试Python代码的各种方法
2015/04/17 Python
详解Django的model查询操作与查询性能优化
2018/10/16 Python
Python Django 实现简单注册功能过程详解
2019/07/29 Python
pygame实现俄罗斯方块游戏（基础篇2）
2019/10/29 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
优秀毕业生找工作自荐信
2014/06/23 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书
英语复习计划
2015/01/19 职场文书
职位证明模板
2015/06/23 职场文书