Нарисуйте изогнутую линию на веб-странице, когда пользователь прокручивает

Мне было интересно, можно ли динамически рисовать изогнутую линию на веб-сайте по мере прокрутки пользователя. Я почти уверен, что это можно сделать с помощью HTML5 Canvas с методом bezierCurveTo(), но это просто сразу рисует все это.

Это будет использоваться на веб-сайте параллакса, который использует библиотеку skrollr.

Есть ли библиотека, которая может упростить это?

Какие-либо предложения?


javascript html parallax html5-canvas drawing
person vipergtsrz    schedule 02.08.2012    source источник
comment
Как кривая связана с прокруткой? Меняется ли кривая по форме, когда пользователь прокручивает страницу? Нам нужно больше деталей.   -  person kevin628    schedule 02.08.2012
comment
Это будет предопределенный путь (со многими кривыми и даже некоторыми петлями), который проходит через весь документ. Предпочтительно, чтобы линия была невидимой и просто отображала черную линию при прокрутке страницы, чтобы создать эффект рисования линии при прокрутке страницы вниз. Надеюсь, это имеет смысл.   -  person vipergtsrz    schedule 03.08.2012

Ответы (1)


arrow_upward
15
arrow_downward

Создатель скроллра здесь. Вы придумали очень интересную задачу. Знаете ли вы, что skrollr работает со встроенным SVG?

После 30 минут поиска (начальная точка: Как нарисовать вектор путь постепенно? (Raphael.js)) Я придумал следующую официальную демонстрацию skrollr:

http://prinzhorn.github.com/skrollr/examples/path.html

Да, я взволнован.

person Prinzhorn    schedule 03.08.2012
comment
Большое спасибо за пример и за вашу очень полезную библиотеку skrollr. Я попробовал ваш пример с firefox и chrome, и он отлично работает в chrome, но firefox кажется немного глючным. Будет ли этот пример работать во всех современных браузерах? - person vipergtsrz; 06.08.2012
comment
Возможно, вам следует поиграть с переходами CSS, которые я добавил в демонстрацию, чтобы она выглядела так, как вы хотите. Они могут вызвать то, что вы называете глючным. Да, он работает во всех современных настольных браузерах, даже в IE 9+ (caniuse.com/#feat= svg-html5). К сожалению, без переходов CSS это выглядит не так хорошо (Opera не поддерживает их в SVG atm). - person Prinzhorn; 06.08.2012
comment
Теперь, когда CSS-переходы больше не нужны, я думаю, это выглядит неплохо. Skrollr теперь сам сглаживает прокрутку. - person Prinzhorn; 12.09.2012