8

I was wondering if it's possible to dynamically draw a curved line on a website as the user scrolls. I'm pretty sure it could be done using HTML5 Canvas with the bezierCurveTo() method, but that just draws the whole thing out right away.

This will be used on a parallax website that's using the skrollr library.

Is there a library out there that can make this easy?

Any suggestions?

vipergtsrz
  • 1,061
  • 1
  • 12
  • 17
  • 2
    How does the curve relate to the scrolling? Does the curve change in shape as the user scrolls? We need more detail. – kevin628 Aug 02 '12 at 17:56
  • It would be a predetermined path (with many curves and even some loops) that goes throughout the entire document. Preferably, the line would be invisible and just show the black line as the user scrolls so it gives the effect of the line being drawn as the page is scrolled down. Hopefully that make sense. – vipergtsrz Aug 02 '12 at 20:42

1 Answers1

15

The creator of skrollr here. That's a really interesting problem you came up with. Did you know skrollr works on embedded SVG?

After 30 minutes of searching (starting point: How to draw a vector path progressively? (Raphael.js)) I came up with the following official skrollr demo:

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

Yes, I am excited.

Community
  • 1
  • 1
Prinzhorn
  • 22,120
  • 7
  • 61
  • 65
  • Thank you very much for the example, and for your very helpful skrollr library. I tried your example with firefox and chrome and it seems to work perfectly in chrome, but firefox seems like it's a little buggy. Would this example work in all modern browsers? – vipergtsrz Aug 06 '12 at 14:24
  • Maybe you should play with the CSS transitions I added to the demo to make it look the way you want it. They might cause what you call "buggy". Yes, it works on all modern desktop browsers, even in IE 9+ (http://caniuse.com/#feat=svg-html5). Sadly it doesn't look that good without CSS transitions (Opera doesn't support them on SVG atm). – Prinzhorn Aug 06 '12 at 15:01
  • Now that CSS transitions aren't needed any more, it looks good I guess. skrollr is now smoothing the scrolling itself. – Prinzhorn Sep 12 '12 at 09:22