0

私はまだ、3 つのレベルに基づいたクライアント向けの Parallax Web サイトに取り組んでいます。3 番目の最上位レベルに追加できないという問題が発生しました。

サイト自体には、一定の速度でスクロールする全画面の背景があります。ゆっくりとスクロールする非常に長い縦長の画像です。その上に、標準速度でスクロールするコンテンツがあります。

3 番目のレベルは単に位置です。特定のコンテンツ領域の上に位置する絶対的なグラフィックです。基本的に浮遊画像。

私が抱えている問題は、私が試した視差プラグインの大部分では、フローティングの第 3 レベルの画像の背後に消えるものが何もないことです。つまり、変更するとすぐに画面サイズに基づいて設定できますが、目に見えない線の後ろに消えてしまいます。

これを防ぐために使用できるプラグインまたは方法はありますか? したがって、基本的には、視差効果が機能していない場合に画像が存在する位置を設定したいと考えており、その点で視差が発生します。

4

3 に答える 3

0

私が抱えている問題は、私が試した視差プラグインの大部分では、フローティングの第 3 レベルの画像の背後に消えるものがないことです。

特定の時点で第 3 レベルの画像を非表示にしたいという問題はありますか? overflow長い単一のスクロール背景で同様の問題が発生し、その上に背景なしで div のページを作成し、divを に設定してページの上下にさまざまな div に画像を配置しましたhidden。第 3 レベルの画像を簡単に配置できるように作成されており、特定のポイントでそれらを非表示にすることもできます。

于 2012-08-29T10:28:03.160 に答える
0

画面サイズで動作させることができる場合は、jquery を使用して、画面サイズに基づいてオブジェクトの位置を取得および設定します。

jQuery(document).ready(function($) {

    jQuery.event.add(window, "load", resizeFrame);
    jQuery.event.add(window, "resize", resizeFrame);

    function resizeFrame() 

    {
        var h = $(window).height();

        $('#foo1') .css({'top': (h-30)});
        $('#foo2') .css({'left': (h-67)});

    }
});

例えば。

于 2013-01-10T11:57:41.443 に答える
0

純粋な jquery/javascript に基づいて、独自のコードを記述する必要があります。

プラグインは、単純な操作のために作成されます。現在に基づいてJSアプリケーションを作成する必要があります$(document).scrollTop()

主なコードパターンは次のとおりです。

$(window).on('scroll resize',function(){
  var Top = $(document).scrollTop();
  if(Top < 200){ /*slide1 actions*/ }
  else if(Top >= 200 && Top < 400){ /*slide2 actions*/ }
  else if(Top >= 400 && Top < 600){ /*slide3 actions*/ }
  // etc
});

パフォーマンスを向上させるには、このヒントhttps://stackoverflow.com/a/11709360/1136141も使用してください

于 2012-07-29T13:18:51.677 に答える