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 не получается. Буду благодарен за совет.
Через [b]position: relative;[/b] (контейнер для анимации), а сами элементы через [b]position: absolute;[/b]
[url="https://atuin.ru/blog/dvizhushhiesya-chasticy-na-js/"]Тут[/url] можно посмотреть пример, только вместо канваса у вас будет [b]<div id="bg-19"></div>[/b], а вместо текста другие элементы.
Хорошо бы если вы показали пример как это действительно на весь задний фон прикрутить а не как картинку. (С background-size: cover;)
А причем тут картинка?
Я специально переделываю такие фоны с полного экрана под блок или секцию, чтобы было удобнее.
Ставьте его на весь экран, задав соотв. значения div'у, а сверху накладывайте что угодно.
Здравствуйте. Не получается. Вернулся через месяц примерно и пробую снова. Сайт на вордпрес. Файлы подключил
[code]
< script src="/js/bg-19"></script>
< script src="/js/three.min.js"></script>
[/code]
Просто ширина по css есть, но ничего не происходит...
Сначала [i]three[/i], потом [i]bg[/i]
Здравствуйте! А можно как то уменьшить скорость анимации? Точнее скорость движения решётки, или вообще остановить решётку, а остальные анимации оставить.
Общую анимацию можно замедлить, уменьшив значение [b]uniforms.time.value += 0.01;[/b]
А чтобы только решетки, это нужно в шейдере уже править значения, поэкспериментируйте с ними.