2012-08-02 12 views
8

ユーザがスクロールするときにウェブサイトに曲線を動的に描くことができるかどうか疑問に思っていました。私はそれがbezierCurveTo()メソッドでHTML5 Canvasを使って行うことができると確信していますが、それはすぐにすべてを取り出します。ユーザがスクロールするときにウェブページに曲線を描く

これはskrollrライブラリを使用している視差ウェブサイトで使用されます。

これを簡単にすることができるライブラリがありますか?

提案がありますか?

+2

カーブはスクロールとどのように関係していますか?ユーザーがスクロールすると曲線の形が変わるのですか?私たちはもっと詳細が必要です。 – kevin628

+0

文書全体に渡る所定のパス(多くの曲線やいくつかのループもあります)です。好ましくは、ラインは目に見えず、ユーザがスクロールするにつれて黒のラインを表示するだけで、ページがスクロールダウンされるときに描画されるラインの効果を与えることが好ましい。うまくいけばそれは理にかなっています。 – vipergtsrz

答えて

14

ここにskrollrの作成者。それはあなたが思いついた本当に興味深い問題です。あなたは組み込みSVGでskrollrが動作することを知っていましたか? (ポイント開始:How to draw a vector path progressively? (Raphael.js))を検索する30分後

私は、次の公式skrollrデモを思い付いた:

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

はい、私は興奮しています。

+0

この例と非常に有益なskrollrライブラリをありがとうございました。あなたの例をfirefoxとchromeで試してみましたが、それはchromeで完全に動作するようですが、firefoxはちょっとバギーのようです。この例は、現代のすべてのブラウザで動作しますか? – vipergtsrz

+0

デモに追加したCSSトランジションで遊んで、自分の好みに合わせてください。あなたは「バギー」と呼ばれるものを引き起こすかもしれません。はい、それはIE 9+(http://caniuse.com/#feat=svg-html5)でもすべての最新のデスクトップブラウザで動作します。残念ながら、それはCSSトランジションがないとうまく見えません(OperaはSVG atmでそれらをサポートしていません)。 – Prinzhorn

+0

CSSトランジションはもう必要なくなりました。 skrollrはスクロール自体をスムーズにしています。 – Prinzhorn

関連する問題