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

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

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

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

Вариант 1:

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

Вариант 2:

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

Вариант 3:

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

Вариант 4:

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

Вариант 5:

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

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

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

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

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

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

  • Артур:

    Здравствуйте
    Очень понравился 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;

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

      Ответить
  • Askimo:

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

    Ответить