Полезные статьи

Белый шум на сайт тильда - код

2025-03-05 09:11

Как добавить белый шум на весь сайт на Тильде?

Сталкивались с такой задачей, когда нужно добавить белый шум на фон всего сайта? Давайте разберемся, зачем нужен эффект и в каком случае его лучше использовать.
Белый шум на фоне сайта — это интересный прием, который можно использовать для создания определенного настроения или улучшения восприятия контента. Вот несколько случаев, когда белый шум может подойти:

1. Минималистичный дизайн

В минимализме белый шум может добавить текстуру и глубину, не отвлекая внимание от основного контента. Такой фон подойдет для сайтов с большим количеством белого пространства и лаконичной типографикой.

2. Сайты в стиле ретро или винтаж

Шум создает ощущение "зернистости", напоминая пленочную фотографию или старый телевизор, что хорошо сочетается с винтажным дизайном.

3. Портфолио дизайнеров или художников

Белый шум может подчеркнуть креативность, добавив немного "сырости" или "естественности" к презентации работ.

4. Медиа и контент-платформы

Если сайт содержит много текста или видео, легкий шум поможет снизить контраст между фоном и контентом, сделав восприятие более комфортным.

5. Сайты с акцентом на текстуру

Если вы хотите создать эффект "материальности", белый шум может имитировать бумагу, бетон или другой материал.

Когда не стоит использовать белый шум:

  • На сайтах с уже перегруженным дизайном.
  • В проектах, где важна чистота и стерильность (например, медицинские сайты).
  • Если фон может создавать визуальные помехи (например, на сайтах для детей или людей с нарушениями зрения).
Пример сайта с белым шумом на фоне на Тильде - https://natural-woman.ru/

Код для добавления белого шума на фон

Данный код достаточно просто скопировать и добавить в блок html на ваш сайт. Если нужно, чтобы шум отображался на всем сайте, а страниц много, то добавьте код в шапку сайта.
<!-- ********************************************************************** -->
<!-- «Белый шум» на всём сайте (Тильда) -->
<!-- ********************************************************************** -->
<div class="uc-noise-overlay"></div>
<style>
.uc-noise-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 99999;
background: transparent;
}
</style>
<script>
(function() {
// === Настраиваемые переменные ===
var noiseOpacity = 0.03; // Прозрачность шума (от 0 до 1)
var noiseSize = 1; // Размер зерна шума (1 - оригинальный размер)
var noiseSpeed = 100; // Скорость обновления шума в миллисекундах
// ===============================

var noiseOverlay = document.querySelector('.uc-noise-overlay');
// Установка прозрачности напрямую
noiseOverlay.style.opacity = noiseOpacity;

var canvas = document.createElement('canvas');
canvas.className = 'noise-canvas';
noiseOverlay.appendChild(canvas);
var ctx = canvas.getContext('2d');

/
* Функция изменения размера canvas с учетом размера шума.
*/
function resizeCanvas() {
canvas.width = window.innerWidth / noiseSize;
canvas.height = window.innerHeight / noiseSize;
canvas.style.width = window.innerWidth + 'px';
canvas.style.height = window.innerHeight + 'px';
ctx.scale(1 / noiseSize, 1 / noiseSize);
}

resizeCanvas();
window.addEventListener('resize', resizeCanvas);

/
* Генерация белого шума на canvas.
*/
function generateNoise() {
var w = canvas.width,
h = canvas.height,
idata = ctx.createImageData(w, h),
buffer32 = new Uint32Array(idata.data.buffer),
len = buffer32.length;

for (var i = 0; i < len; i++) {
buffer32[i] = ((Math.random() * 255) | 0) << 24;
}

ctx.putImageData(idata, 0, 0);
}

/**
* Цикл обновления шума с заданной скоростью.
*/
function loop() {
generateNoise();
setTimeout(loop, noiseSpeed);
}

loop();
})();
</script>