17

これが不可能だとあなたが言う前に、私はそれが可能であることを知っています。例を次に示します: http://victoriabeckham.landrover.com/INT

主な問題は、iOS がスクロール時に DOM 操作をフリーズさせることです。この問題を解決するには、何らかの手法を使用する必要があります。私が使用したいと思っていた視差プラグインは stellar.js ですが、私が直面している問題は、そのプラグインの「iOS デモ」がデスクトップで実際に使用できないことです。今朝 3 時間いじりましたが、iOS とデスクトップの両方で正しく動作するセットアップを取得できませんでした。

両方で同じように動作するようにstellar.jsを構成するテクニック(それが可能かどうかはわかりません)、または両方で動作する別のライブラリ、または回避策をプログラムする方法についての洞察が必要です。自分。

どんな助けでも大歓迎です。

4

6 に答える 6

11

ステップ 1: このように作成してオブジェクトを作成します

{
startFrameNumber: {
     //first obj
     id: idOfElement
     duration: howeverManyFrames
     startLeft: whatever
     endLeft: whatever
     startTop: stillWhatever
     endTop: whateverAgain
   },

   nextStartFrameNumber: {

   }
}

ステップ 2: CSS を使用してページをスクロールできないようにします。つまり、100% の高さと幅で、overflow: hidden を使用します。

ステップ 3: ユーザーが (カスタム スクロールバー、キーボード アクション、またはタッチ イベントを介して) スクロールすると、スクロールした距離などに基づいてアニメーションを x フレーム進めます。作成したアニメーション オブジェクトにキー [フレーム] がある場合は、それを表示されて動いているもののキューに追加し、キュー内のすべてのものを適切な場所に移動するか、アクティブ オブジェクトのキューから削除します。

それでおしまい。物事を動かす機能はかなり簡単ですが、アニメーションをスムーズにするには少しいじる必要があります。

于 2012-06-20T16:04:43.953 に答える
2

視差効果の各レイヤーを手動でスクロールするだけで、ブラウザのページ スクロールに頼らずに自分で制御できます。

于 2012-06-20T14:48:36.503 に答える
1

Zynga Scroller jsライブラリを使用して、クロスデバイス/ブラウザの視差スクロールを正常に実装しました。クリックアンドタッチイベントとモバイルWebkitデバイスでのスクロールの相互運用性である主な懸念事項の1つを処理します。これにより、スクロールしながらDOMを操作できます。

次に、視差効果を作成するには、次の3つのオプションがあります。

  1. 3D変換を使用して実際の3D視差をシミュレートします（パースペクティブと変換の原点を制御する親/ラッパー要素を使用）。
  2. stellar.jsやskrollrなどの2D視差ライブラリを使用する
  3. 独自の視差スクロールアルゴリズムを構築します。

これは、オプション1の簡単なデモ（既存のサンプルコードを使用）で、デスクトップデバイスとモバイルデバイス間でスムーズな視差スクロールがどのように機能するかを示しています。もちろん、3D変換をサポートするデバイスに制限されています。Zynga Scrollerは、クリック/タッチアンドドラッグで機能することに注意してください。必要なのはoverflow: scrollCSSのみであるため、デスクトップソリューションとして使用しないでください。

于 2012-06-26T18:47:22.640 に答える
1

jQuery-Plugin "Scroll Path" http://joelb.me/scrollpathを見て、これをさまざまなレイヤーと速度と組み合わせてください。例のページのスクロールは、垂直方向の視差ステージだけでなく、上下にスクロールするとレイヤーが水平方向にも移動することがわかります。これは Scroll Path で可能です。

于 2012-06-27T12:22:28.440 に答える
0

http://cubiq.org/iscroll-4と stellar.js を一緒に使ってみてください。

于 2012-06-24T17:52:19.567 に答える
0

デスクトップの視差処理を通常どおり行い、「touchmove」イベント リスナーを追加して、スクロール イベントを発生させます。

document.body.addEventListener('touchmove', function(){$window.scroll()}, true);

iOS 5.1.1 を搭載した iPad 2 でテストおよび動作中

于 2012-12-04T16:26:25.280 に答える