- <!DOCTYPE html>
- <html>
-
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width">
- <title>
- MATRIX 文字特效(元素版)
- </title>
- <style>
- body { margin: 0; padding: 0; background-color: black; overflow: hidden;
- } span{ display: inline-block; width: 25px; height: 25px; font-size: 20px;
- font-weight: 900; text-align: center; }
- </style>
- </head>
-
- <body>
- <div class="matrix">
- </div>
- <script>
- (function matrix() {
- var w, h, row, col, eles;
- var array = [],
- matrix1 = [],
- matrix2 = [];
- var str = "ΑΒΓΔΕΖΗΘΙΚ∧ΜΝΞΟ∏Ρ∑ΤΥΦΧΨΩ";
- //初始化所需要的数据
- function data() {
- w = window.innerWidth;
- h = window.innerHeight;
- row = Math.floor(h / 25);
- col = Math.floor(w / 25);
- array = (new Array(col)).fill(0);
- }
- //排列元素区域,模仿画布效果
- function createCanvas() {
- var s = "",
- canvas = null;
- for (var i = 0; i < row * col; i++) {
- s += '<span></span>';
- }
- canvas = document.querySelector('.matrix');
- canvas.innerHTML = s;
- eles = Array.from(document.querySelectorAll('span'));
- }
- //设置元素随机的内容
- function setContent() {
- eles.forEach(function(el) {
- el.innerHTML = str[Math.floor(Math.random() * str.length)];
- });
- }
- //设置元素的颜色能随机变化
- function setColor() {
- var color = Math.floor(Math.random() * 255 + 1);
- eles.forEach(function(el) {
- el.style.color = "rgb(" + color + ", 255, 75)";
- })
- }
- //把全部数据分装成一个矩阵
- function setMatrix1() {
- var k = 0;
- for (var i = 0; i < row; i++) {
- matrix1[i] = [];
- for (var j = 0; j < col; j++) {
- matrix1[i][j] = eles[k++];
- }
- }
- }
- //由于元素是从左到右排列的,需要重新设置为从上到下排列
- function setMatrix2() {
- for (var i = 0; i < col; i++) {
- matrix2[i] = [];
- for (var j = 0; j < row; j++) {
- matrix2[i][j] = matrix1[j][i];
- }
- }
- }
- function start() {
- var opacity = 0;
- for (var i = 0; i < col; i++) {
- if (Math.random() > 0.5) {
- //使用for循环设置一段元素的透明度,模仿"尾巴"效果
- for (var j = 0; j < row; j++) {
- opacity = 1 - Math.floor(Math.log10(j + 1) * 100) / 100;
- if (matrix2[i][array[i] - j]) {
- matrix2[i][array[i] - j].style.opacity = opacity;
- }
- }
- array[i] += 1;
- if (array[i] > row) {
- array[i] = 0;
- //当元素位置大于行数时重置整行元素的透明度,模仿画布刷新
- matrix2[i].forEach(function(el) {
- el.style.opacity = 0.03;
- });
- }
- }
- }
- }
- function init() {
- data() createCanvas() setMatrix1() setMatrix2()
- }
- function run() {
- setContent() setColor() start()
- }
- //当窗口大小变化时,需要重新初始化数据和排列区域
- window.onresize = init;
- init() setInterval(run, 1000 / 60)
- })()
- </script>
- </body>
- </html>