0

このプラグイン「http://joelb.me/scrollpath/」を使用して単純なスクロールパスを作成しようとしていますが、回転や円弧などを使用せずに単純な線を作成するだけです。これがどのように機能するか理解できないようです。プラグインのチュートリアルも見つかりません！？

私は次のようなパスが欲しい...

                __________________
 ______________|

運が悪かったので次のように書きました...

誰かが私が間違っていることを見ることができますか？

.moveTo(400, 50, {name: "one"})
  .lineTo(400, 50, {name: "two"})
  .lineTo(400, 50, {name: "three"})
  .lineTo(400, 50, {name: "four"})
  .lineTo(400, 50, {name: "five"})
  .lineTo(400, 50, {name: "six"})
4

2 に答える 2

0

lineTo思考引数は相対値（つまり、「移動」）を使用しているようです400;50が、それらは絶対値であるため、例はそこに移動し400;50てそこにとどまります。

次のようなことを試してください：

path
  .moveTo(50,100,{name: 'one'})
  .lineTo(400,100,{name: 'two'})
  .lineTo(400,50,{name: 'three'})
  .lineTo(800,50,{name: 'four'});

さらに、プラグインを初期化するときにdrawPath: trueオプションとして渡すと、パスがどのように実装されているかがわかります。

$(".your-container-element").scrollPath({
  drawPath: true,
});

ここで（いくつかの）ドキュメントを見つけることができます：https://github.com/JoelBesada/scrollpath

于 2012-12-06T10:02:56.560 に答える
0

scrollpath が行うことは、指定された (x,y) 座標を画面の中央に移動することです。

例えば

.moveTo(50,100,{name='a'})

画面の中央に (50,100) 移動します。

したがって、それを使用するには、次のように絶対位置を使用する必要があります。

例えば。div 1 =(50,100) div 2= (100,100) div 3= (150,100)

これを処理するには、

.moveTo(50,100,{name: 'div1'});
.moveTo(100,100,{name: 'div2'});
.moveTo(150,100,{name: 'div3'});

(50,100) が中心になっていることに注意してください。したがって、div を正確に (50,100) に配置すると、右下隅のスペースが占有されます。

代わりに、div 全体を (50,100) の中心に置きます。

于 2012-12-10T11:03:42.470 に答える