анимированный фон Bubbly-bg.js

Bubbly-bg.js — анимированный фон в виде пузырьков на сайт

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

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

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

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

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

фон анимированный для сайта

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

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

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

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

анимированный фон Bubbly-bg.js

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

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

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

<script src="http://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="http://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="http://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>

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

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *