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を表示しているかをテキストで示します。乾杯!