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

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

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

Вариант 1:

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

Вариант 2:

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

Вариант 3:

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

Вариант 4:

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

Вариант 5:

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

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

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

Анимационный эффект, который частично увеличивает изображение в блоке

Красивый фоновый эффект на JS с падающими сферами

Анимированный эффект тумана на фоновом изображении средствами CSS

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

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

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

  • Александр:

    Почему то "Ответ" на Ваш комментарий вызывает ошибку 404. А может скрипт нарисовать звезду?

    Ответить
    • Alexander:

      Тут нужно на канвасе рисовать, например если брать 5тый вариант, то вместо текста картинку ставить.
      Или искать что то похожее без канваса.
      На днях скину что-нибудь похожее.

      Почему то "Ответ" на Ваш комментарий вызывает ошибку 404

      Спасибо за замечание, исправил ошибку (это я от дублей так избавлялся, когда в адресной строке вопросики стоят)

      Ответить
      • Александр:

        На днях скину что-нибудь похожее.

        Отлично, очень интересно, буду ждать!

        Ответить
  • Александр:

    Исправлю и добавлю: я имел в виду внешнее SVG изображение - это вместо формы круга, чтобы можно было подключить не только круги квадраты и треугольники...

    Ответить
  • Александр:

    Добрый вечер, Александр!
    Подскажите, пожалуйста, как можно в первом примере с кругами применить внешне SVG изображение и увеличить количество объектов фона?

    Ответить
    • Alexander:

      Круги скрипт рисует, это не графика

      Ответить
  • Лана:

    Здравствуйте! Подскажите, как установить такой фон на сайт на вордпресс?

    Ответить
    • Alexander:

      Ну это понятие растяжимое...
      1 - Открыть шаблон нужный и вставить HTML
      2 - Подключить или вставить в существующие CSS и JS
      3 - Настроить по вкусу

      Вот пример приблизительный:
      https://atuin.ru/js/art/lines-primer.html

      Ответить
      • Лана:

        Спасибо, буду пробовать

        Ответить