бесконечная вертикальная прокрутка на div без изображения

Question

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

1. Если элемент холста имеет тот же размер, что и содержимое, визуальные элементы становятся пикселизированными и искаженными, если высотаизменения, такие как с добавлением нового контента.Перезагрузка библиотеки не является решением этой проблемы, поскольку она создает визуально отвлекающий эффект.
2. Если элемент canvas имеет произвольную предельную высоту и не имеет размера в соответствии с содержимым (при этом переполнение просто скрыто), производительностьвеб-сайт страдает, так как библиотека потребляет чрезмерную мощность процессора.
3. Если элементу холста просто дается позиция fixed в CSS, производительность хорошая, и она остается, но выглядит неуместно, как и все, что за ней стоит.перемещается во время прокрутки.

После некоторого рассмотрения кажется, что лучший способ заставить его работать, это придать ему скромный размер (например, 200% высоты страницы), а затем заставить его повторяться бесконечно во время прокрутки- производительность будет приемлемой, и не будет никаких искажений.Тем не менее, я не могу найти способ сделать это - я знаю, что в CSS есть свойство background-repeat, но это, кажется, работает только для изображений.

Есть ли способ сделать то, что япытаюсь сделать?Приветствуются ответы как на CSS, так и на JS.

Answer 1

После некоторых проб и ошибок, похоже, что единственным способом выполнения того, что я пытаюсь сделать, является следующее:

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

Если все сделано правильно, это создает эффект, когда пользователь, по-видимому, просматриваетбесконечный фон, когда действительно одни и те же 3 или около того div'ов перетасовываются снова и снова.Движение в обратном направлении - тот же принцип.

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

Answer 2

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

К сожалению, вы не можете иметь торт и вишню сверху, поэтому вам придется либо отказаться от идеи "впечатляющих эффектов", потому что они непрактичны, либо принять меры ...

document.body.onresize=function(){Adjustments();};


function Adjustments(){

 var W=Container.offsetWidth, H=Container.offsetHeight;


 // You've now got the new resolution so go for your life!

 }