Disegna una linea curva su una pagina Web mentre l'utente scorre

Mi chiedevo se è possibile disegnare dinamicamente una linea curva su un sito Web mentre l'utente scorre. Sono abbastanza sicuro che potrebbe essere fatto usando HTML5 Canvas con il metodo bezierCurveTo(), ma questo attira subito l'intera faccenda.Disegna una linea curva su una pagina Web mentre l'utente scorre

Questo verrà utilizzato su un sito Web di parallasse che utilizza la libreria skrollr.

C'è una libreria là fuori che può rendere questo facile?

Qualche suggerimento?

fonte

2012-08-02 vipergtsrz

Come si relaziona la curva allo scorrimento? La curva cambia forma mentre l'utente scorre? Abbiamo bisogno di maggiori dettagli. – kevin628

Sarebbe un percorso predeterminato (con molte curve e anche alcuni loop) che attraversa l'intero documento. Preferibilmente, la linea sarebbe invisibile e mostra semplicemente la linea nera mentre l'utente scorre per dare l'effetto della linea disegnata mentre la pagina scorre verso il basso. Spero che abbia senso. – vipergtsrz

Il creatore di skrollr qui. Questo è un problema davvero interessante che hai trovato. Sapevi che skrollr funziona su SVG incorporato?

Dopo 30 minuti di ricerca (punto di partenza: How to draw a vector path progressively? (Raphael.js)) Sono venuto con la seguente skrollr demo ufficiale:

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

Sì, sono entusiasta.

fonte

2012-08-03 08:05:34 Prinzhorn

Grazie mille per l'esempio e per la tua utilissima libreria skrollr. Ho provato il tuo esempio con Firefox e Chrome e sembra funzionare perfettamente in chrome, ma Firefox sembra un po 'buggato. Questo esempio funzionerebbe in tutti i browser moderni? – vipergtsrz

Forse dovresti giocare con le transizioni CSS che ho aggiunto alla demo per farlo sembrare come lo vuoi tu. Potrebbero causare ciò che chiami "buggy". Sì, funziona su tutti i browser desktop moderni, anche in IE 9+ (http://caniuse.com/#feat=svg-html5). Purtroppo non sembra così bello senza transizioni CSS (Opera non li supporta su SVG atm). – Prinzhorn

Ora che le transizioni CSS non sono più necessarie, credo sia giusto. skrollr ora sta lisciando lo scorrimento stesso. – Prinzhorn

Disegna una linea curva su una pagina Web mentre l'utente scorre

risposta

Problemi correlati