HTML:
|
1 |
<div id="bg-19"></div> |
CSS:
|
1 2 3 4 5 |
#bg-19 { width: 100%; height: 520px; margin: 20px 0; } |
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 не получается. Буду благодарен за совет.
Через position: relative; (контейнер для анимации), а сами элементы через position: absolute;
Тут можно посмотреть пример, только вместо канваса у вас будет <div id="bg-19"></div>, а вместо текста другие элементы.
Хорошо бы если вы показали пример как это действительно на весь задний фон прикрутить а не как картинку. (С background-size: cover;)
А причем тут картинка?
Я специально переделываю такие фоны с полного экрана под блок или секцию, чтобы было удобнее.
Ставьте его на весь экран, задав соотв. значения div'у, а сверху накладывайте что угодно.
Здравствуйте. Не получается. Вернулся через месяц примерно и пробую снова. Сайт на вордпрес. Файлы подключил
Просто ширина по css есть, но ничего не происходит...
Сначала three, потом bg