Как создать на своем сайте бегущую строку с символами в стиле «Матрицы», похожую на ту, что используется в браузере Opera GX?

Question

Назар

дизайн , javascript , css , opera

Как создать на своем сайте бегущую строку с символами в стиле «Матрицы», похожую на ту, что используется в браузере Opera GX?

Как это изображение в правом верхнем углу?

28 февраля 2025 г. 23:54

Ответы на вопрос 1

Похожие вопросы

Answer 1

Создание бегущей строки в стиле «Матрицы» на вашем сайте может быть выполнено с использованием HTML и CSS, а также немного JavaScript. Вот пример, как вы можете это сделать.

### HTML:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Бегущая строка в стиле Матрицы</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="matrix">
        <div class="matrix-content"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>
```

### CSS (styles.css):
```css
body {
    background-color: black;
    color: lime;
    font-family: 'Courier New', Courier, monospace;
    overflow: hidden;
    margin: 0;
}

.matrix {
    position: fixed;
    top: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
    width: auto;
    animation: matrixAnimation 10s linear infinite;
}

@keyframes matrixAnimation {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}

.matrix-content {
    display: inline-block;
    padding: 10px;
    font-size: 24px;
}
```

### JavaScript (script.js):
```javascript
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';
const matrixContent = document.querySelector('.matrix-content');

setInterval(() => {
    let randomChar = chars.charAt(Math.floor(Math.random() * chars.length));
    matrixContent.innerHTML += randomChar;
    if (matrixContent.innerHTML.length > 50) { // ограничиваем длину строки
        matrixContent.innerHTML = matrixContent.innerHTML.substring(1);
    }
}, 100);
```

### Пояснение:
1. **HTML**: Создаем основной каркас, где располагаем контейнер для бегущей строки.
2. **CSS**: Устанавливаем стиль фона, цвет текста и шрифта. Также применяем ключевые кадры для создания анимации, чтобы строка двигалась из правого края в левый.
3. **JavaScript**: Каждые 100 миллисекунд добавляем случайный символ в пролетающей строке. Когда длина строки превышает 50 символов, удаляем первый символ, поддерживая строку в разумных пределах.

Этот код создаст эффект бегущей строки с символами в стиле «Матрицы», которая будет двигаться по экрану. Вы можете изменять стили, скорости и количество символов по своему усмотрению!