Блог AnnDesigner.ru

Эффект "Шум" для сайта

НА ВСЮ ДЛИНУ СТРАНИЦУ:

<style>
.bg .tn-atom {
    background-size: auto !important;
    background-repeat: repeat !important;
    pointer-events: none;
}
.bg {
    pointer-events: none;
    z-index: 99999999 !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
}
</style>

НА ОДИН БЛОК:

<style>
.bg .tn-atom {
    background-size: auto !important;
    background-repeat: repeat !important;
    pointer-events: none;
}
.bg {
    pointer-events: none;
}
</style>

Применение:

  • Добавить на страницу Zero-блок необходимой высоты.
  • Добавить в зеро Shape со следующими настройками — window container, height 100%, width 100%, opacity 5%-30%, задаем класс (css class name) bg.
  • В шейп (shape) вставляем картинку noise.gif, предварительно сохранив ее себе на диск.
  • Добавить на страницу блок Т123 (html)
  • В блок html записываем скрипт стилей CSS для зеро-блока, приведенный ниже.
  • В скрипте ничего не меняем, если задали класс шейпа .bg, а если дали свое название классу, то заменяем .bg на своё наименование в двух местах.
noise.gif
Благодарим за скрипт Тильдошную - https://tildoshnaya.com/modification/pattern
Эффекты и анимация