4

Stellar JS を使用して要素に背景画像を設定し、視差で移動する中央の画像を実現しようとしています。ただし、標準のアプローチを使用しようとすると、背景の位置が恒星によって更新され、センタリングが上書きされることに気付きます (それがそれを上書きしていると思います)。状況を説明するためにフィドルを作成しました。

http://jsfiddle.net/captDaylight/wvuQm/1/

スクロールの中心に画像を配置する方法はありますか?

(スタックにより、この投稿にコードを添付する必要があります。この場合は重要ではありませんが、フィドルの例は非常に簡単なので、バイパスするものを投稿しています)

background: url(http://upload.wikimedia.org/wikipedia/commons/e/e5/Seine_wide.jpg) no-repeat center center; 
background-size: auto 100%;

<> background-position に関するこの他のスタックの投稿を読んでいましたが、更新しようとすると、視差が壊れているように見えました。

http://jsfiddle.net/captDaylight/wvuQm/3/

4

2 に答える 2

15

水平視差を無効にする必要があります。これにより、Stellar.js は水平方向の背景の配置を変更しません。

あなたの例では、Stellarへの更新された呼び出し

$(window).stellar({ horizontalScrolling: false });

この変更で JSFiddle の例を更新しました: http://jsfiddle.net/wvuQm/5/

于 2013-04-11T01:33:00.867 に答える
0

以下のcssを削除

margin-bottom:50px;

次のスクリプトを追加して試してください

$(window).stellar({
    scrollProperty: 'transform'
});
于 2013-04-10T17:19:43.483 に答える