6

ユーザーがスクロールすると、ロケットが所定のパスをたどり、ページを蛇行するページを作成しようとしています（ページは下部に読み込まれます）。

jQuery.pathのようなものを使用してSVGのanimateMotionを使用してパスに沿って要素をアニメーション化することはできますが、ユーザーがスクロールするときに要素がそのパスに沿って移動するソリューションを完全に理解することはできません。

jQuery Scroll Pathは、要素をページの中央に移動するため、私が探しているものではありません。

TEDxGUCのWebサイトで見たように、下にスクロールすると、曲がったパスに沿ってリンゴが移動します。彼らがRaphael.jsと「パスに沿ったアニメーション」拡張機能を使用していることはわかりますが、それでも実際にどのように達成したかについて頭を悩ませることはできません。私はまだJS忍者ではありません。

正しい方向へのポインタは本当にありがたいです！

編集

まだこの種のことに興味がある人のために、私はSkrollr Pathに出くわしました。これは、私が探していたものとほぼ同じです。例

4

2 に答える 2

10

私は www.tedxguc.com Web サイトの開発者です。

アニメーションをスクロールで動作させる方法に関して、あなたはすでに正しい道を進んでいると思います（しゃれが意図されています）。スクロール バーがビデオ プレーヤーのシーク バーであるかのように、アニメーションを単純に概念化しました。

そのため、ページの高さをアニメーションの長さに設定し、タイムラインで動いているかのように、要素が移動する 1 ピクセルごとにアニメーションの 1 ミリ秒に対応するようにします。

アニメーションのセットアップ コードは、homepage.jsファイルの最後にあります。

makeAnim() には、次のようなコードがたくさんあります。

setAnim(obj.apple,{0:{along:0}, 1000:{along:1}}, start+3200, 1000);

これが基本的に行うことは次のとおりです。リンゴが0（パスの開始）から1（パスの終了）に移動するようにリンゴを設定し、アニメーションの「開始」+ 3200 ピクセルのオフセット。

理解しやすくするために、コードを少しごまかして修正しました。

これは、開発中の初期のコンセプトのjsfiddleです。私のコメントがお役に立てば幸いです。

于 2013-02-15T16:20:46.417 に答える
0

y 値を取り、x を計算する式を作成する必要がありますが、これが私が思いついたものです...

http://codepen.io/anon/pen/zCuEb

HTML

<div id="oh" style="background-color:red;height:100px;width:100px;position:fixed"></div>
<div style="height:25000px;width:20px;background-color:#000033">&nbsp;</div>

JS

var $w = $(window);
var $d = $('#oh');
$w.scroll(function(){
  $d.css('left',formula400())
});
function formula400(){
  return Math.sin($w.scrollTop()/100)*100
}
于 2013-02-14T16:43:43.057 に答える