1

私は視差効果について多くのことを調べたり読んだりしてきましたが、最初の視差サイトを作成しようとしています。私の主な関心事の 1 つは、iPad で動作させることです。パララックスは iPad ではうまく機能しないと結論付けるのに十分なほど読んで見ました。

現在、すべての Parallax サイトの中で、iPad で正常に動作しているように見える 2 つを見つけましたが、それらが機能するために何が違うのか、まだわかりません。何かアイデアはありますか?

基本的に私が知りたいのは、視差サイト間の違いは何ですか. canvas タグを使用しているものもあれば、上と左の値を調整しているだけのように見えるものもあれば、画像を置き換えているように見えるものもあります。また、iPad に適した Parallax サイトの最適なアプローチは何ですか。

iPad で問題なく動作することがわかった 2 つのサイトは次のとおりです。

http://www.nike.com/jumpman23/aj2012/

https://victoriabeckham.landrover.com/INT

ありがとう。

4

2 に答える 2

3

私の回答は、具体的にはhttps://victoriabeckham.landrover.com/INTです。

これらは、入力の種類に応じてスクロールをシミュレートしています。実際にページをスクロールしてから、さまざまなプロパティをアニメーション化するわけではありません。タッチ イベント、マウス ホイール、またはそれらのカスタム ベイク スクロール バーを読み取り、スクロールしたい量を確認します。ページ内のすべてのコンテンツはコンテナー内にあります。そうすれば、タッチ イベントを実行しているときは、ページ上でどれだけ動いているかを読み取るだけです。

その上、アニメーション ループを使用してすべてを動かしています。彼らは、window.requestAnimationFrame メソッドを利用して、ページの変更を最適化し、iPad とブラウザーでスムーズに動作するようにしています。これについて説明したページは次のとおりです。

http://paulirish.com/2011/requestanimationframe-for-smart-animating/ ブラウザーは、同時実行アニメーションを単一のリフローおよび再描画サイクルにまとめて最適化し、より忠実度の高いアニメーションを実現できます。たとえば、CSS トランジションまたは SVG SMIL と同期した JS ベースのアニメーション。さらに、表示されていないタブでアニメーション ループを実行している場合、ブラウザーはそれを実行し続けません。つまり、CPU、GPU、およびメモリの使用量が少なくなり、バッテリー寿命が大幅に長くなります。

さらに、ページ上ですべてをアニメーション化する方法を決定するカスタム キーフレーム オブジェクトを作成しました。私はこの設定にうんざりしています。残念ながら、それはオープン フレームワークではありません。エフェクトの開始場所、終了場所、イージングなどをキーフレーム オブジェクト内で設定でき、それらのフレームワークがアニメーション ループを通じて残りのすべてを処理します。

{
    selector: '#outro2 > .content2',
    startAt: outroStart+500,
    endAt: outroStart+1000,
    onEndAnimate:function( anim ) {},
    keyframes: [
        { 
            position: 0,
            properties: {
                "margin-top": 650
            }

        },
        {
            position: 1,
            ease: TWEEN.Easing.Sinusoidal.EaseOut,
            properties: {
                "margin-top": 650
            }
        }
    ]
},

要約すると、カスタム実装されたスクロールと、requestAnimationFrame メソッドを使用したカスタム アニメーション ループの組み合わせは、iOS デバイスに通常関連付けられている視差の制限を超えていると思います。

于 2012-10-08T20:44:45.697 に答える
0

あなたの質問に答えるために、私はコードを見ました、そして私はこれを見つけました：

  // touch
  function touchStartHandler(e) {
    //e.preventDefault();
    touchStart.x = e.touches[0].pageX;

    // Store the position of finger on swipe begin:
    touchStart.y = e.touches[0].pageY;

    // Store scroll val on swipe begin:
    scrollStart = scrollTop;
  };

  function touchEndHandler(e) {

  }

  function touchMoveHandler(e) {

    /*if (settings.freezeTouchScroll == true) {
      $('#status2').html('freezin');
      return false;
    };
    $('#status2').html('moovin');
    */

    e.preventDefault();
    offset = {};
    offset.x = touchStart.x - e.touches[0].pageX;

    // Get distance finger has moved since swipe begin:
    offset.y = touchStart.y - e.touches[0].pageY; 

    // Add finger move dist to original scroll value
    scrollTop = Math.max(0, scrollStart + offset.y);
    checkScrollExtents();
  }

私はそのコードを自分で試したことはありませんが、それがあなたに必要なものだと思います。試してみて、それで十分かどうかをお知らせします。

于 2012-08-02T01:09:30.840 に答える