Анимированные фоны для блоков и страниц — ч.2

В этой заметке представлено несколько вариантов для анимации фона.

Анимация, связана с появлением и передвижением различных фигур и линий, и может накладываться на любой статичный фон, как однотонный, так и графический.

В примерах анимация накладывается в области canvas в пропорциях экрана монитора.

Вариант 1:

Должен быть подключен скрипт фона

Вариант 2:

Должна быть подключена библиотека jQuery и скрипт фона

Вариант 3:

Должен быть подключен скрипт фона

Вариант 4:

Должен быть подключен скрипт фона

Вариант 5:

Должен быть подключен скрипт фона

Смотрите также: Анимированные фоны - часть 1

Смотрите также:

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

Ваш комментарий отправлен!

Комментарии:

  • Клавдия:

    Обычно я в блок Html вставляла. Не знаю, про счётчики. Надо все 3 кода вставлять?

    Ответить
  • Клавдия:

    Здравствуйте понравился 1 анимация, не могу понять как ее установить. Вставляю в блок HTML но ничего не работает . Для тильды можно его применить?

    Ответить
    • Alexander:

      На тильде, если мне память не изменяет, скрипты нужно в счетчики вставлять. Другого там места не нашел как их подключать еще.

      Ответить
      • Клавдия:

        Куда в счётчики именно, обычно в блок вставляю.

        Ответить
        • Alexander:

          Кончено три
          HTML это непосредственно сам блок где у вас.
          CSS можно добавить в стили сайта, должны быть какие то пользовательские.
          А JS я точно не знаю как тильда разрешает ставить. Но в счетчики помоему можно вставлять JS код

          Ответить
  • Артур:

    Здравствуйте
    Очень понравился 4-й вариант, но почему-то у меня не работает!?
    Ошибка в скрипте
    Все остальные варианты работают.

    Ответить
    • Alexander:

      А какая ошибка?
      https://codepen.io/atuin/pen/xvLjBL
      так то нормально вроде работает.

      Ответить
  • mars:

    красиво, но вот добавил 1 анимация и страница начала грузить процессор (i7) на 70%

    Ответить
  • Светлана:

    Хочу первый вариант использовать в шапке, но когда уменьшаю высоту пузырьки становятся плоскими, а не круглыми. Мне надо 150px высота шапки

    Ответить
    • Alexander:

      Вставляйте canvas в блок с высотой 150px и нужной шириной
      Или можно так: в самом скрипте (в функции initHeader) поменяйте:
      height = window.innerHeight;
      на
      height = 150;

      Ответить
  • Алексей:

    Как спрятать этот фон под основные блоки сайта(если они по центру экрана). Canvas все перекрывает.

    Ответить
    • Alexander:

      Выше канваса ставим:
      <div class="text">БЛОК</div>

      А класс примерно такой:
      .text {
      text-align:center;
      width:100%;
      position:absolute;
      }

      Еще 1 вариант, это к стилю канаваса добавить:
      position:absolute;
      z-index:-1;

      А ниже него писать все тексты и размещать блоки

      Ответить
      • Максим:

        Все работает но ни как не становится бекграундом — все сдвигается… выложи пример, где дивы поверх этого чуда.

        Ответить
        • Alexander:

          Как то так:
          https://atuin.ru/js/art/lines-primer.html

          Ответить
  • Askimo:

    Пятый вариант классный!

    Ответить