HTML实现代码雨源码及效果示例

2024年8月6日发(作者：)

js代码：

(function() {

var lastTime = 0;

var vendors = ['ms', 'moz', 'webkit', 'o'];

for (var x = 0; x < && !tAnimationFrame; ++x) {

tAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];

AnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||

window[vendors[x] + 'CancelRequestAnimationFrame'];

}

if (!tAnimationFrame)

tAnimationFrame = function(callback, element) {

var currTime = new Date().getTime();

var timeToCall = (0, 16 - (currTime - lastTime));

var id = eout(function() {

callback(currTime + timeToCall);

},

timeToCall);

lastTime = currTime + timeToCall;

return id;

};

if (!AnimationFrame)

AnimationFrame = function(id) {

clearTimeout(id);

};

}());

// stats

var stats = new Stats();

e(0);

on = 'absolute';

= '0px';

= '0px';

Child(ment);

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: idth,

HEIGHT: eight,

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 = mentById('canvas');

= text('2d');

= ;

= ;

Blur = 0;

yle = '#000';

ct(0, 0, , );

= ;

S = ( / _WIDTH);

for (var i = 0; i < S; i++) {

[i] = [];

[i][0] = {

'open': true,

'position': {

'x': 0,

'y': 0

},

'strength': 0

};

}

();

Lines();

Code();

// not doing this, kills CPU

// aracters();

ze = function() {

AnimationFrame(ion);

ion = null;

ect(0, 0, , );

ounter = 0;

ect(0, 0, , );

= idth;

= eight;

();

};

},

loop: function() {

ion = requestAnimationFrame(function() {

();

});

();

();

},

draw: function() {

var velocity, height, x, y, c, ctx;

// slow fade BG colour

Color = 'rgba(0, 0, 0, 0.5)';

yle = 'rgba(0, 0, 0, 0.5)';

ct(0, 0, , );

CompositeOperation = 'source-over';

for (var i = 0; i < S; i++) {

// check member of array isn't undefined at this point

if ([i][0].canvas) {

velocity = [i][0].velocity;

height = [i][0].;

x = [i][0].position.x;

y = [i][0].position.y - height;

c = [i][0].canvas;

ctx = text('2d');

age(c, x, y, _WIDTH, height);

if (([i][0].position.y - height) < ) {

[i][0].position.y += velocity;

} else {

[i][0].position.y = 0;

}

}

}

},

createCode: function() {

if (ounter > S) {

clearTimeout(CodeLoop);

return;

}

var randomInterval = FromInterval(0, 100);

var column = Column();

if (column) {

var codeLength = FromInterval(_LENGTH_, _LENGTH_);

var codeVelocity = (() * (TY_ - TY_)) + TY_;

var lettersLength = ;

[column][0].position = {

'x': (column * _WIDTH),

'y': 0

};

[column][0].velocity = codeVelocity;

[column][0].strength = [column][0].velocity / TY_;

for (var i = 1; i <= codeLength; i++) {

var newLetter = FromInterval(0, (lettersLength - 1));

[column][i] = s[newLetter];

}

Canvii(column);

ounter++;

}

CodeLoop = setTimeout(Code, randomInterval);

},

createCanvii: function(i) {

var codeLen = [i].length - 1;

var canvHeight = codeLen * _HEIGHT;

var velocity = [i][0].velocity;

var strength = [i][0].strength;

var text, fadeStrength;

var newCanv = Element('canvas');

var newCtx = text('2d');

= _WIDTH;

= canvHeight;

for (var j = 1; j < codeLen; j++) {

text = [i][j];

CompositeOperation = 'source-over';

= '30px matrix-code';

if (j < 5) {

Color = 'hsl(104, 79%, 74%)';

OffsetX = 0;

OffsetY = 0;

Blur = 10;

yle = 'hsla(104, 79%, ' + (100 - (j * 5)) + '%, ' + strength + ')';

} else if (j > (codeLen - 4)) {

fadeStrength = j / codeLen;

fadeStrength = 1 - fadeStrength;

OffsetX = 0;

OffsetY = 0;

Blur = 0;

yle = 'hsla(104, 79%, 74%, ' + (fadeStrength + 0.3) + ')';

} else {

OffsetX = 0;

OffsetY = 0;

Blur = 0;

yle = 'hsla(104, 79%, 74%, ' + strength + ')';

}

xt(text, 0, (canvHeight - (j * _HEIGHT)));

}

[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 = FromInterval(0, ( - 1));

randomCode = [randomCodeIndex];

randomCodeLen = ;

randomCharIndex = FromInterval(2, (randomCodeLen - 1));

newRandomCharIndex = FromInterval(0, ( - 1));

newRandomChar = s[newRandomCharIndex];

randomCode[randomCharIndex] = newRandomChar;

}

aracters();

},

createLines: function() {

= Element('canvas');

= ;

= ;

on = 'absolute';

= 0;

= 0;

= 10;

Child();

var linesYBlack = 0;

var linesYWhite = 0;

2 = text('2d');

ath();

dth = 1;

Style = 'rgba(0, 0, 0, 0.7)';

while (linesYBlack < ) {

(0, linesYBlack);

(, linesYBlack);

linesYBlack += 5;

}

dth = 0.15;

Style = 'rgba(255, 255, 255, 0.7)';

while (linesYWhite < ) {

(0, linesYWhite + 1);

(, linesYWhite + 1);

linesYWhite += 5;

}

();

},

assignColumn: function() {

var randomColumn = FromInterval(0, (S - 1));

if ([randomColumn][0].open) {

[randomColumn][0].open = false;

} else {

return false;

}

return randomColumn;

},

randomFromInterval: function(from, to) {

return (() * (to - from + 1) + from);

},

snapshot: function() {

(URL());

}

};

function eventListenerz() {

var controlToggles = mentsByClassName('toggle-info');

var controls = mentById('info');

var snapshotBtn = mentById('snapshot');

function toggleControls(e) {

tDefault();

ame = ame === 'closed' ? '' : 'closed';

}

for (var j = 0; j < 2; j++) {

controlToggles[j].addEventListener('click', toggleControls, false);

}

ntListener('click', ot, false);

}

= function() {

();

eventListenerz();

};

css代码：

@import url("/css?family=Carrois+Gothic");

@font-face {

font-family: 'matrix-code';

src: url('/demos/canvas/matrix/font/?#iefix') format('embedded-opentype'), url('/demos/canvas/matrix/font/') format('woff'), url('/demos/canvas/matrix/font/mat

}

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;

}

# {

-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;

}