web-dev-qa-db-ja.com

iOSとデスクトップで動作する視差スクロールサイトを作成するにはどうすればよいですか？

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

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

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

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

javascriptcssiosparallax
17
Jo Sprague

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

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

   nextStartFrameNumber: {

   }
}

ステップ2：CSSを介してページをスクロールできないようにします。つまり、100％の高さと幅でオーバーフローします：非表示

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

それでおしまい。物事を動かすための機能は、アニメーションをスムーズにするために少し遊んでみる必要があることを除いて、かなり単純なはずです。

11
hobberwickey

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

2
Oleg V. Volkov

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

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

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

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

1
Danny Garcia

JQuery-Pluginの「スクロールパス」 http://joelb.me/scrollpath を見て、これをさまざまなレイヤーと速度と組み合わせてください。サンプルページのスクロールは、垂直視差ステージであるだけでなく、上下にスクロールしながらレイヤーを水平方向に移動することも理解できます。これはスクロールパスで可能です。

1
ToniTornado

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

0
Bruno

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

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

IOS5.1.1を搭載したiPad2でテストおよび動作

0
Renan Santos