• Home
  • News
  • Software
  • Knowledge
  • MMO
  • Tips
  • Security
  • Network
  • Office
AnonyViet - English Version
  • Home
  • News
  • Software
  • Knowledge
  • MMO
  • Tips
  • Security
  • Network
  • Office
No Result
View All Result
  • Home
  • News
  • Software
  • Knowledge
  • MMO
  • Tips
  • Security
  • Network
  • Office
No Result
View All Result
AnonyViet - English Version
No Result
View All Result

Share the code to create a beautiful 3D matrix effect for the website

AnonyViet by AnonyViet
February 15, 2023
in Tips
0

AnonyViet once shared a very nice set of matrix source code with Canvas and received very good feedback. Today, I will share more 3D matrix Source code written in HTML – CSS and JS. Vertical text effect on black background like in hacker movies.

Join the channel Telegram belong to AnonyViet 👉 Link 👈

This effect creates a very cold style like the Hackers in the movie. You can use this source code to learn more knowledge or show your friends for fun. With a depth matrix effect, make the screen appear mysterious. Now, I will introduce the Source code and how to use it for you to see.

Introduction to the 3D matrix effect source code

Share the code to create a beautiful 3D matrix effect for the website 6

because the text is falling so when I took it it was a bit smudged, but in fact the effect is very beautiful.

User manual

Create a file index.html has the following code content:

<!DOCTYPE html>
<html lang="en" >
   <head>
      <meta charset="UTF-8">
      <title>Matrix code rain</title>
      <link rel="stylesheet" href="https://anonyviet.com/share-code-tao-hieu-ung-ma-tran-3d/css/style.css">
   </head>
   <body>
      <html>
         <body>
            <div id="info">
               <p><strong>Matrix code rain</strong></p>
               <p>Experiment write up <a href="http://neilcarpenter.com/labs/matrix-rain" target="_blank">here</a>.</p>
			
               <a href="#" class="toggle-info" id="open">Show info</a>
               <a href="#" class="toggle-info" id="close">Hide info</a>			
            </div>
            <canvas id="canvas"></canvas>
         </body>
         <a href="https://github.com/neilcarpenter/Matrix-code-rain" id="ribbon" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0; z-index: 50;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
      </html>
      <script src="https://neilcarpenter.com/demos/canvas/matrix/stats.min.js"></script>
      <script  src="js/index.js"></script>
   </body>
</html>

Next create a folder name JS and in that directory create one more file index.js has the following content:

(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 from here https://www.dafont.com/matrix-code-nfi.font
	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();
	},

	// this used to be used straight after createCode, without using createCanvii - it allowed
	// the characters within the code streams to be easily changable, but caused huge perf issues
	// OLDdraw: function() {

	// 	var codesLen = M.codes.length;
	// 	var codeLen;
	// 	var x;
	// 	var y;
	// 	var text;
	// 	var velocity;
	// 	var columnIndex;
	// 	var strength;
	// 	var fadeStrength;

	// 	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 < codesLen; i++) {
			
	// 		velocity = M.codes[i][0].velocity;
	// 		M.codes[i][0].position.y += velocity;

	// 		y = M.codes[i][0].position.y;
	// 		x = M.codes[i][0].position.x;
	// 		codeLength = M.codes[i].length;
	// 		strength = M.codes[i][0].strength;

	// 		for (var j = 1; j < codeLength; j++) {
	// 			text = M.codes[i][j];

	// 			if (j < 5) {
	// 				M.ctx.shadowColor="hsl(104, 79%, 74%)";
	// 				M.ctx.shadowOffsetX = 0;
	// 				M.ctx.shadowOffsetY = 0;
	// 				M.ctx.shadowBlur = 10;
	// 				M.ctx.fillStyle="hsla(104, 79%, " + (100 - (j * 5)) + '%, ' + strength + ')';
	// 			} else if (j > (codeLength - 4)) {
	// 				fadeStrength = j / codeLength;
	// 				fadeStrength = 1 - fadeStrength;

	// 				M.ctx.shadowOffsetX = 0;
	// 				M.ctx.shadowOffsetY = 0;
	// 				M.ctx.shadowBlur = 0;
	// 				M.ctx.fillStyle="hsla(104, 79%, 74%, " + (fadeStrength + 0.3) + ')';
	// 			} else {
	// 				M.ctx.shadowOffsetX = 0;
	// 				M.ctx.shadowOffsetY = 0;
	// 				M.ctx.shadowBlur = 0;
	// 				M.ctx.fillStyle="hsla(104, 79%, 74%, " + strength + ')';
	// 			}

	// 			// M.ctx.fillStyle="hsl(104, 79%, " + (M.codes[i][0].strength * 74) + '%)';
	// 			M.ctx.fillText(text, x, (y - (j * M.settings.COL_HEIGHT)));

	// 			if ((j === codeLength - 1) && (y - ((j + 1) * M.settings.COL_HEIGHT) > M.HEIGHT)) {
	// 				columnIndex = M.codes[i][0].position.x / M.settings.COL_WIDTH;
	// 				M.codes[columnIndex][0].open = true;
	// 				M.codes[columnIndex][0].position.y = 0;
	// 			}
	// 		}
	// 	}

	// },
	
	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();

};

Finally create folder named css contains files style.css has the following content:

@import url("https://fonts.googleapis.com/css?family=Carrois+Gothic");

@font-face {
  font-family: 'matrix-code';
  src: url('https://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.eot?#iefix') format('embedded-opentype'), 
       url('https://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.woff') format('woff'), 
       url('https://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.ttf')  format('truetype'),
       url('https://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);
}

p a {
    color: #fff;
}
p a:hover {
  color: #EFFDEB;
  text-shadow: 0px 0px 5px #75AD61;
}

After creating, you will have a collection of files according to the structure:

  • index.html
  • css (directory)
    style.css
  • js (directory)
    index.js

Share the code to create a beautiful 3D matrix effect for the website 7

If you can’t do it yourself, you can download the ready-made Source Code at the link below:

That’s it, finally you just need to Upload this Source Code to the Host and share it with your friends. If you do not know how to Upload to Host, please refer to AnonyViet’s tutorial article at the link below:

You can use the free hosting service at 000webhost to test the source code !!

Like Fanpage or follow website for quick updates of good articles.

Good luck
Lmint.

The article achieved: 5/5 – (100 votes)

Previous Post

Instructions to disable incognito mode of Google Chrome

Next Post

Share the latest unlimited Facebook renaming TUT

AnonyViet

AnonyViet

Related Posts

10 languages ​​for web programming should learn in the isolation season
Tips

10 languages ​​for web programming should learn in the isolation season

June 16, 2025
Ruby vs Python: Where is the better language for application programming
Tips

Ruby vs Python: Where is the better language for application programming

June 15, 2025
Instructions for health drive health check on your computer
Tips

Instructions for health drive health check on your computer

June 14, 2025
PHPSOUND 6.2 – Code to build social networks to share music
Tips

PHPSOUND 6.2 – Code to build social networks to share music

June 13, 2025
How to detect and prevent email monitoring from others
Tips

How to detect and prevent email monitoring from others

June 12, 2025
8 free tools to security when programming software
Tips

8 free tools to security when programming software

June 11, 2025
Next Post
Share the latest unlimited Facebook renaming TUT

Share the latest unlimited Facebook renaming TUT

0 0 votes
Article Rating
Subscribe
Login
Notify of
guest

guest

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments

Recent News

From Ho Chi Minh City to London: How Global Investors Use Bow Miner to Efficiently Minine Cryptocurrencies

From Ho Chi Minh City to London: How Global Investors Use Bow Miner to Efficiently Minine Cryptocurrencies

June 17, 2025
How to activate Adaptive Power on iOS 26 to save battery

How to activate Adaptive Power on iOS 26 to save battery

June 17, 2025
How to adjust the time to postpone the alarm iOS 26

How to adjust the time to postpone the alarm iOS 26

June 16, 2025
10 languages ​​for web programming should learn in the isolation season

10 languages ​​for web programming should learn in the isolation season

June 16, 2025
From Ho Chi Minh City to London: How Global Investors Use Bow Miner to Efficiently Minine Cryptocurrencies

From Ho Chi Minh City to London: How Global Investors Use Bow Miner to Efficiently Minine Cryptocurrencies

June 17, 2025
How to activate Adaptive Power on iOS 26 to save battery

How to activate Adaptive Power on iOS 26 to save battery

June 17, 2025
How to adjust the time to postpone the alarm iOS 26

How to adjust the time to postpone the alarm iOS 26

June 16, 2025
AnonyViet - English Version

AnonyViet

AnonyViet is a website share knowledge that you have never learned in school!

We are ready to welcome your comments, as well as your articles sent to AnonyViet.

Follow Us

Contact:

Email: anonyviet.com[@]gmail.com

Main Website: https://anonyviet.com

Recent News

From Ho Chi Minh City to London: How Global Investors Use Bow Miner to Efficiently Minine Cryptocurrencies

From Ho Chi Minh City to London: How Global Investors Use Bow Miner to Efficiently Minine Cryptocurrencies

June 17, 2025
How to activate Adaptive Power on iOS 26 to save battery

How to activate Adaptive Power on iOS 26 to save battery

June 17, 2025
  • Home
  • Home 2
  • Home 3
  • Home 4
  • Home 5
  • Home 6
  • Next Dest Page
  • Sample Page

©2024 AnonyVietFor Knowledge kqxs hôm nay xem phim miễn phí SHBET 23win https://kubet88.yoga/ KUBET BK8 Bj88

No Result
View All Result
  • Home
  • News
  • Software
  • Knowledge
  • MMO
  • Tips
  • Security
  • Network
  • Office

©2024 AnonyVietFor Knowledge kqxs hôm nay xem phim miễn phí SHBET 23win https://kubet88.yoga/ KUBET BK8 Bj88

wpDiscuz
0
0
Would love your thoughts, please comment.x
()
x
| Reply