Все мы в матрице .....

irbees2008 Опубликовано - 24 - апреля Шаблоны

Адаптировал: irbees2008
Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Всем привет ,вот обновляю шаблон после переезда и многое надо переписывать , заблокировал сайт а заглушка даже не выводит текст , вот решил добавить в заглушку Эффект матрицы на HTML, CSS, JS. Выкладываю сам эффект , там все просто эффект демонстрирует возможности чистого HTML, чистого CSS, и чистого JS
И так приступим:
Между тегами body добавляем само основание

Код:

<canvas id="matrix"></canvas>

Далее стили для нашей матрицы

Код:

body {
    margin: 0;
    padding: 0;
    background: #000;
    overflow: hidden;
    height: 100vh;
}

#matrix {
    display: block;
    background: #000;
}

Ну и последнее это скрипт необходимый для работы

Код:

const canvas = document.getElementById('matrix');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const chars = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const charArray = chars.split('');
const fontSize = 14;
const columns = canvas.width / fontSize;
const drops = [];

for (let i = 0; i < columns; i++) {
    drops[i] = 1;
}

function draw() {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.fillStyle = '#0F0';
    ctx.font = fontSize + 'px monospace';

    for (let i = 0; i < drops.length; i++) {
        const text = charArray[Math.floor(Math.random() * charArray.length)];
        ctx.fillText(text, i * fontSize, drops[i] * fontSize);

        if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
            drops[i] = 0;
        }
        drops[i]++;
    }
}

setInterval(draw, 33);

window.addEventListener('resize', function() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});

Ну у меня вот такая страница получилась

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
	<head>
		<meta http-equiv="content-type" content="text/html; charset={{ lang.encoding }}"/>
		<meta http-equiv="content-language" content="{{ lang.langcode }}"/>
		<meta name="generator" content="{{ what }} {{ version }}"/>
		<meta name="document-state" content="dynamic"/>
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
				background: #000;
				overflow: hidden;
				height: 100vh;
			}
			#matrix {
				display: block;
				background: #000;
			}
			.errorwrap {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				text-align: center;
				color: #0F0;
				font-family: monospace;
				font-size: 24px;
				z-index: 100;
				background: rgba(0, 0, 0, 0.8);
				padding: 20px;
				border: 1px solid #0F0;
			}
		</style>
		<title>{{ lang.site_temporarily_disabled }}</title>
	</head>
	<body>
		<canvas id="matrix"></canvas>
		<div align="center" class="errorwrap">
			<p>{{ lock_reason }}</p>
		</div>
	</body>
	 <script type="text/javascript">
	        var canvas = document.getElementById('matrix');
	        var ctx = canvas.getContext('2d');
	        canvas.width = window.innerWidth;
	        canvas.height = window.innerHeight;
	        var fontSize = 16;
	        var columns = canvas.width / fontSize;
	        var drops = [];
	        // Фиксированный набор символов для матрицы (цифры и буквы)
var matrixChars = '01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン{{ lock_reason }}';
	        var chars = matrixChars.split('');
	        for (var x = 0; x < columns; x++)
	            drops[x] = 1;
	        function draw() {
	            ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
	            ctx.fillRect(0, 0, canvas.width, canvas.height);
	            ctx.fillStyle = '#0F0';
	            ctx.font = fontSize + 'px monospace';
	            for (var i = 0; i < drops.length; i++) {
	                // Используем случайные символы из набора, а не из lock_reason
	                var text = chars[Math.floor(Math.random() * chars.length)];
	                ctx.fillText(text, i * fontSize, drops[i] * fontSize);
	                if (drops[i] * fontSize > canvas.height && Math.random() > 0.975)
	                    drops[i] = 0;
	                drops[i]++;
	            }
	        }
	        setInterval(draw, 33);
	        // Адаптация под изменение размера окна
	        window.addEventListener('resize', function() {
	            canvas.width = window.innerWidth;
	            canvas.height = window.innerHeight;
	            columns = canvas.width / fontSize;
	            drops = [];
	            for (var x = 0; x < columns; x++)
	                drops[x] = 1;
	        });
	    </script>
</html>