Фоновая анимация #19

HTML:

CSS:

JS:

  • Подключаем библиотеку three.min.js
  • Подключаем скрипт: bg-19.js

Пример:

Найдено на codepen.io у пользователя Marco Gomez

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

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

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

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

  • Ярослав:

    Спасибо вам за полезный контент.
    Хочу спросить. Как можно в блок с фоновой анимацией <div id="bg-19"> </div> разместить дочерние элементы(текст, пиктограммы итд) так, чтобы они ложилось по верх самой анимации, а не смещали ее вниз?
    Возникли сложности, поскольку свойство данной анимации не совсем такое как у background-image:, фоновая анимация ведет себя, как вложенный дочерний элемент в <div id="bg-19"> </div> поэтому после вложения моих элементов сползает вниз. Свойство position: relative; может сдвинуть в нужное место мое вложение, но вернуть обратно фон средствами css не получается. Буду благодарен за совет.

    Ответить
    • Alexander:

      Через position: relative; (контейнер для анимации), а сами элементы через position: absolute;
      Тут можно посмотреть пример, только вместо канваса у вас будет <div id="bg-19"></div>, а вместо текста другие элементы.

      Ответить
  • Сергей:

    Хорошо бы если вы показали пример как это действительно на весь задний фон прикрутить а не как картинку. (С background-size: cover;)

    Ответить
    • Alexander:

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

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

    Здравствуйте. Не получается. Вернулся через месяц примерно и пробую снова. Сайт на вордпрес. Файлы подключил     

    < script src="/js/bg-19"></script>
    < script src="/js/three.min.js"></script>
    

    Просто ширина по css есть, но ничего не происходит…

    Ответить
    • Alexander:

      Сначала three, потом bg

      Ответить