Блог

хотя у меня есть некоторый опыт обработки, я новичок в p5.js . Для академической работы я хочу создать веб-сайт с несколькими интерактивными возможностями. Я хочу, чтобы этот сайт был одной страницей, без ссылок, без ничего, только один прокрутка.

Для этого я хотел бы иметь несколько холстов вдоль длинной прокрутки. Я также хотел бы, чтобы эти интерактивные взаимодействия начинались только тогда, когда пользователь находится в правильном положении прокрутки. Я могу придумать несколько решений для моей проблемы, но я не уверен, как их реализовать, ни какое из них не является лучшим.

Возможно ли это сделать с одной единственной страницей? Можно ли поместить холст в divs, а затем отобразить его по порядку с помощью css?

Еще одно решение, которое пришло мне в голову, — создать несколько страниц, но имитировать это всего лишь одно, используя какую-то анимацию для имитации прокрутки, это гарантировало бы, что пользователь всегда просматривает холст в полноэкранном режиме, но я не уверен, что он мог бы управлять им с помощью обычной полосы прокрутки.

Есть ли какое-нибудь простое решение? Заранее спасибо.

Похоже, вы ищете режим экземпляра.

Режим экземпляра позволяет вам делать именно то, что вы описываете: вы можете создать несколько эскизов и добавить их все на страницу.

Вы также можете использовать parent() функцию для размещения вашего холста в определенном div. Бесстыдная самореклама: вот руководство, которое включает в себя размещение холста в определенном div.

Я бы начал с того, что заставил эти части работать, прежде чем беспокоиться о прокрутке. Но как только вы будете готовы, я бы рассмотрел возможность настройки прослушивателя прокрутки в JavaScript и запуска ваших эскизов в режиме экземпляра при определенных значениях.

Удачи!