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

2024-09-28 00:13:15

先看看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模拟实现烟花特效

本文实例为大家分享了js实现烟花特效的具体代码,供大家参考,具体内容如下如下图首先描绘圆周运动 // d1 /*css*/ div{ height: 4px; width: 4px; background: red; position: absolute; } //js var div = document.getElementById('div'); // 画运动点 document.getElementsByTagName('body')[0].appendChild(tdiv); //
javascript实现超好看的3D烟花特效

本文实例为大家分享了超好看3D烟花的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="utf-8"> <title>3D烟花</title> <style> html,body{ margin:0px; width:100%; height:100%; overflow:hidden; background:#000; } #c
JS实现音乐导航特效

本文实例为大家分享了JS实现音乐导航特效的具体代码,供大家参考,具体内容如下知识点 1.audio.play() 播放音频 2.audio.currentTime = 0 从头开始播放 3.引入工具库工具库运行效果< 鼠标进入后,播放音频代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></ti
JS实现普通轮播图特效

本文实例为大家分享了JS实现轮播图特效的具体代码,供大家参考,具体内容如下知识点轮播图思想: ① 建立一个全局变量索引,始终标记当前显示图片. ② 根据当前图片的数量,动态创建下方的●图片指示器. ③ 轮播图的初始状态为第一张图片在中间,剩余所有图片均放在即将显示图片位置. ④ 当点击>的时候,当前图片调用动画移动函数进行左移,与此同时新的一张图片调用动画函数移入到div中,而会将下一张展示的图片移动到div右侧. ⑤ 需要进行边界判断,如果当前的图片大于图片数量或者小于等于0,重新给索引赋
JS实现导航栏楼层特效

本文实例为大家分享了JS实现导航栏楼层的具体代码,供大家参考,具体内容如下知识点 1.多个事件有冲突的时候,需要设置flag判断是什么事件,进而进行后续操作. 2.楼层效果就是判断scrollTop和offsetTop的关系 3.引入工具库工具库运行效果导航与界面实现互动代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t
js仿黑客帝国字母掉落效果代码分享

看过黑客帝国的朋友或许都对开头的字幕效果很熟悉,自从影片播放以来,网页设计者有不少都在模仿这种字母掉落的效果,而且最后还有文字显现效果"I love you",你可以稍加修改,在情人节,用来对你的恋人表白哦~ 运行效果图: 大家也动手运行一下, ----------------效果演示---------------- 为大家分享js仿黑客帝国字母掉落效果代码如下 <head> <meta htt
JS实现吸顶特效

本文实例为大家分享了JS实现吸顶特效的具体代码,供大家参考,具体内容如下知识点 1.scroll家族和offset家族的结合运用 2.当nav的offsetTop大于屏幕卷去高度的时候,进行吸顶 3.添加一个固定类,如果满足条件,为nav加类名运行效果滚动页面时,保证导航栏吸顶代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l
HTML+JS实现“代码雨”效果源码（黑客帝国文字下落效果）

我们先看看HTML+JS实现"代码雨"的最终效果 1.绿色: 2.彩色: 3.背景色: 4.绿色逐渐变浅: 源代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Code -by ZhenYu.Sha</title>
JavaScript实现联动菜单特效

一篇关于JavaScript特效的文章,今天给大家带来联动菜单特效,这可能是一个系列哦! 效果图和以前一样,先发效果图,然后在进行讲解. 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>&l
javascript实现鼠标点击生成文字特效

前端实用脚本(鼠标点击生成文字特效) 你好! 这是你第一次写博客目的是为了记录常用到的技术知识以供同行参考学习和方便自己以后查阅前言最近在浏览一些博客的时候总是能够看到,当我点击鼠标的时候鼠标位置就会出现文字然后往上方浮动.当时比较好奇,然后空闲时间就去百度了一下这种效果是怎么实现的,然后结合一些博客整理了一下. 旧版本 1.单一的浮动效果 ,旧版本的只有一种颜色,比较单调: 2.没有遵循 : 可以run的demo才是好demo的原则新版本 1.筛选了多种好看的颜色样式 2.复制代码到
JS实现秒杀倒计时特效

本文实例为大家分享了JS实现秒杀倒计时特效的具体代码,供大家参考,具体内容如下知识点添加一个定时器,对时间标签不断进行更新设置即可. 引入工具库工具库运行效果代码引入MyTool.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div
JS实现商品橱窗特效

本文实例为大家分享了JS实现商品橱窗特效的具体代码,供大家参考,具体内容如下知识点换算公式 ① 滚动条长度 = ( 盒子的宽度 / 内容的宽度) * 盒子的宽度滚动条长度/盒子的长度 = 盒子的长度/内容的长度 ② 内容走的距离 = (内容的长度 - 盒子的长度)/ (盒子的长度 - 滚动条的长度)* 滚动条走的距离运行效果代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset
JS实现简单日历特效

本文实例为大家分享了JS实现简单日历特效的具体代码,供大家参考,具体内容如下知识点 1.引入我的工具包 2.运用JavaScript内置对象 Date 运行效果代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; pa
JS实现星星海特效

本文实例为大家分享了JS实现星星海特效的具体代码,供大家参考,具体内容如下知识点 1.CSS使用@keyframes自定义动画,使用animation调用自定义动画 2.opacity 透明度.从 0.0 (完全透明)到 1.0(完全不透明) 3.CSS中transform 4.animation-delay 属性定义动画何时开始. 5.求屏幕尺寸 var 宽 = document.documentElement.clientWidth; var 高 = document.documentEl
JS实现黑客帝国文字下落效果

代码一: 黑客帝国文字下落效果查看效果源码下载源代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>黑客帝国文字下落</title> <style> html, body {margin:0; padding:0; background-color:#000;} #divList {width:800px; h
Javascript实现鼠标点击冒泡特效

本文实例为大家分享了js鼠标点击冒泡的具体代码,供大家参考,具体内容如下一个用JS写的鼠标左击特效点击鼠标左键会出现红心"❤"或者字符表情"(๑•́ ₃ •̀๑)"- 常用Emoji 可以自行替换,如需复制,请从底部链接移步至Github 代码 onload = function() { var click_cnt = 0; var $html = document.getElementsByTagName("html")[0]; var $
JS实现小星星特效

本文实例为大家分享了JS实现小星星特效的具体代码,供大家参考,具体内容如下鼠标点击窗口实现如图效果: 看起来是不是很像小星星呀代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body style="background-color: #000000;"&g
js实现烟花特效

本文实例为大家分享了js实现烟花特效的具体代码,供大家参考,具体内容如下 1.概述在网页背景中实现鼠标点击出现模拟烟花爆炸的特效 2.思路 1.获取鼠标点击位置,底端创建烟花节点. 2.为烟花添加css属性,烟花节点从下至上运动. 3.运动至鼠标位置时移除烟花节点,同时生成多个烟花碎片. 4.为不同的烟花碎片随机生成不同的颜色.运动速度.运动方向. 5.烟花碎片超出屏幕显示部分时移除. 3.代码部分 <!DOCTYPE html> <html lang="en"&g
JS实现电商商品展示放大镜特效

本文实例为大家分享了JS实现电商商品展示放大镜的具体代码,供大家参考,具体内容如下知识点 1.使用children获取字标签组 2.求当前鼠标坐标 3.碰撞检测 4.大小盒子通过比例同步运行效果代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>
JS实现图片切换特效

本文实例为大家分享了JS实现图片切换的具体代码,供大家参考,具体内容如下知识点: 1.window.onload网页全部加载完后再执行 2.获取元素设置属性 3.临界情况判断运行效果: 点击上一张下一章切换图片代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &l
JS实现音乐钢琴特效

本文实例为大家分享了JS实现音乐钢琴的具体代码,供大家参考,具体内容如下知识点 1.keydown键盘按下事件 2.ev['keyCode'] 获取当前按键 3.引入工具库工具库运行效果 1-9控制按键代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <styl

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

相关推荐

随机推荐