2

今日修正しようとしているこの独特のバグがあります-それでも運がありません。以下の例を見ると、

http://vitaliyg.com/alpha/hire/

これが何が起こるかです。全幅の背景画像は、y軸に沿って中央に配置された正しい位置に読み込まれます。次に、画像にカーソルを合わせると、画像全体が中央にジャンプし、ゆっくりと通常の目的の位置に戻ります。

これを引き起こしているのはleft: 50%; margin-left: -960px;です。これにより、最初から画像を正しく中央に配置できます。このCSSがない場合、ホバーはジャンプしませんが、画像はブラウザの左上に固定されて読み込まれます。

上記のリンクで、赤いボックスはコンテンツdivです。青いボックスは、とパララックスするテキストですbackground-image。

これが私が達成しようとしていることです：

  1. 外観をbackground-image中央に配置します。
  2. ユーザーがにカーソルを合わせるbackground-imageと、ページの中央にジャンプしません。
  3. そして最後に、ユーザーがx軸上で「視差」できる幅を減らします。現在のように、ユーザーは十分な忍耐力があれば画像を左右に見ることができます。視差を非常に微妙にしたいと思います。

また、私はここにあるjParallaxを使用しています：
http ：//stephband.info/jparallax/

ご協力ありがとうございました！

4

1 に答える 1

3

CSSを介して背景画像の位置を設定すると、jQueryParallaxプラグインがそれらの設定を変更するようです。解決策は、jQuery視差がその視差レイヤーを処理した後にこれらの設定を適用することです。

まず、クラスからとを削除margin-leftしleftます.parallax-layer#background。

.parallax-layer#background {
  background-image: url('../images/bg.jpg');
  background-repeat: no-repeat;
  background-position: center bottom;
  width: 1920px;
  height: 620px;
}

理想的には、同じ方法を使用して青いボックスを中央に配置します（部分的に画面から外したい場合を除く）。また、HTMLに基づいて必須ではないCSSを削除しました。

.parallax-layer#tagline {
  background-color: blue;
  width: 400px;
  height: 400px;
}

最後に、バックグラウンドセレクターとタグラインセレクターから削除されたCSSルールを追加して、jQueryParallaxがこれらのアイテムを操作した後に適用されるようにします。

jQuery(document).ready(function(){
    jQuery('#parallax .parallax-layer')
    .parallax({
        mouseport: jQuery('body')
    });
  jQuery('#background').css({marginLeft: "-960px", left: "50%", bottom: "0px"});
  jQuery('#tagline').css({marginLeft: "-200px", left: "50%"});
});

マウスがビューポートに入ると、背景画像の左側に大きな白いセクション（ボディの背景色）が表示されなくなります。

このjQueryParallaxプラグインは、設計上、すべてを左上に揃えます。マウスが青いボックスの右側からビューポートに入ると、そのボックスはその場所に正しくアニメートされます。

ただし、マウスが青いボックスの左側から入ると、そのボックスはカーソル位置に「ジャンプ」します。上記の最後のjQuery行を削除して、ブラウザの読み込み時に青いボックスが上/左になるようにするか、のような低いパーセンテージ値を使用することを検討してください25%。

この質問/回答にたどり着き、実際のマークアップを使用したい人のために、2つのjsFiddleを設定しました。一方のjsFiddleは問題を複製し、もう一方は上記のような解決策を持っています。

元の問題-jsFiddle
修正済み適用-jsFiddle

両方のjsFiddleはフルスクリーンモードであるため、視差効果を確認できます。

元の問題を表示する手順：
1。上記の元の問題jsFiddleリンクを起動します。
2.ビューポートに入らないように注意しながら、jsFiddle再生ボタンを押します。青いボックスが何らかの方法で移動した場合...ビューポートに入ったので、再生ボタンをもう一度押します。
3.ビューポートの左上から入力すると、問題が発生します...背景画像が再調整されるとHTML本文（白色）が表示されます。
4.いつでも再生ボタンを押して、Webページをリセットします。

Fixed Appliedを表示するには、上記のリンクを起動するか、ブラウザのアドレスバーでURLを変更して、そのjsFiddleのリビジョン1が表示されるようにします。（すなわちhttp://jsfiddle.net/UG4Sq/1/embedded/result/）

青いボックスは、どのjsFiddleを表示しているかをテキストで示します。乾杯！

于 2012-12-07T08:43:13.870 に答える