Dibuje una línea curva en una página web mientras el usuario se desplaza

Me preguntaba si es posible trazar dinámicamente una línea curva en un sitio web a medida que el usuario se desplaza. Estoy bastante seguro de que se podría hacer utilizando HTML5 Canvas con el método bezierCurveTo(), pero eso simplemente lo saca todo de inmediato.Dibuje una línea curva en una página web mientras el usuario se desplaza

Esto se usará en un sitio web de paralaje que esté usando la biblioteca skrollr.

¿Hay una biblioteca por ahí que pueda hacer esto tan fácil?

¿Alguna sugerencia?

Fuente

2012-08-02 vipergtsrz

¿Cómo se relaciona la curva con el desplazamiento? ¿La curva cambia de forma a medida que el usuario se desplaza? Necesitamos más detalles. – kevin628

Sería una ruta predeterminada (con muchas curvas e incluso algunos bucles) que recorre todo el documento. Preferiblemente, la línea sería invisible y solo mostraría la línea negra a medida que el usuario se desplaza, por lo que da el efecto de dibujar la línea a medida que la página se desplaza hacia abajo. Espero que tenga sentido. – vipergtsrz

El creador de skrollr aquí. Ese es un problema realmente interesante que se te ocurrió. ¿Sabía que skrollr funciona en SVG incrustado?

Después de 30 minutos de búsqueda (punto de partida: How to draw a vector path progressively? (Raphael.js)) se me ocurrió la siguiente demo oficial skrollr:

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

Sí, estoy emocionado.

Fuente

2012-08-03 08:05:34 Prinzhorn

Muchas gracias por el ejemplo y por su muy útil biblioteca skrollr. Probé tu ejemplo con Firefox y Chrome y parece funcionar perfectamente en Chrome, pero Firefox parece que es un poco problemático. ¿Funcionaría este ejemplo en todos los navegadores modernos? – vipergtsrz

Quizás debería jugar con las transiciones de CSS que agregué a la demostración para que se vea como lo desea. Podrían causar lo que llamas "buggy". Sí, funciona en todos los navegadores de escritorio modernos, incluso en IE 9+ (http://caniuse.com/#feat=svg-html5). Lamentablemente, no se ve tan bien sin las transiciones CSS (Opera no los admite en atmósfera SVG). – Prinzhorn

Ahora que ya no se necesitan transiciones CSS, se ve bien, supongo. skrollr ahora suaviza el desplazamiento. – Prinzhorn

Dibuje una línea curva en una página web mientras el usuario se desplaza

Respuesta

Cuestiones relacionadas