Здравствуйте, сегодня будем создавать фон с анимированными пузырьками для сайта, и в этом нам поможет скрипт – Bubbly-bg.js.

Скачать исходники для статьи можно ниже

Скачать файл скрипта можно здесь – Bubbly-bg.js

Загружаем файл Bubbly-bg.js к себе на сайт, можно через обычный загрузчик wordpress – админка, пункт “Медиафайлы”, подпункт “Добавить новый”.

Далее копируем путь до файла:

В моем примере путь следующий “https://mnogoblog.ru/wp-content/uploads/2017/10/bubbly_bg.js”

Далее нужно вставить код для подключения данного скрипта к сайту.
Переходим в админке в пункт “Внешний вид”, подпункт “Редактор”, справа в списке шаблонов выбираем файл “header.php”, находим в нем тег “body” и после него вставляем следующий код:

<script src="https://mnogoblog.ru/wp-content/uploads/2017/10/bubbly_bg.js"></script>
  <script>
bubbly();
</script>

В итоге фоновывая картинка будет следующая:

Например на стандартной теме wordpress – Twenty Fifteen – она выглядит следующим образом:

Также можно поменять цвет пузырьков и фона.
Для этого достаточно изменить код следующим образом:

Если хотите поменять цвет на черно-красный, то используйте следующий код:

<script src="https://mnogoblog.ru/wp-content/uploads/2017/10/bubbly_bg.js"></script>
  <script>
bubbly({
    colorStart: "#111",
    colorStop: "#422",
    bubbleFunc: () => `hsla(0, 100%, 50%, ${Math.random() * 0.25})`
});
</script>

Фиолетовый с разноцветными пузырьками:

<script src="https://mnogoblog.ru/wp-content/uploads/2017/10/bubbly_bg.js"></script>
<script>
bubbly({
    colorStart: "#4c004c",
    colorStop: "#1a001a",
    bubbleFunc: () => `hsla(${Math.random() * 360}, 100%, 50%, ${Math.random() * 0.25})`
});
</script>

Желтый/розовый и красный/оранжевый/желтый пузыри:

<script src="https://mnogoblog.ru/wp-content/uploads/2017/10/bubbly_bg.js"></script>
<script>
bubbly({
    colorStart: "#fff4e6",
    colorStop: "#ffe9e4",
    blur: 1,
    compose: "source-over",
    bubbleFunc: () => `hsla(${Math.random() * 50}, 100%, 50%, .3)`
});
</script>

PS:
Также можно прикрепить скрипт bubbly-bg.js следующим кодом, который также нужно разместить после тега “body”:

  <script src="https://cdn.jsdelivr.net/npm/bubbly-bg@0.2.3/dist/bubbly-bg.js"></script>
  <script>bubbly();</script>

На этом все! Красивых и прибыльных вам сайтов!