4

Stellar.jsを使用して視差効果を実行しようとしていますが、data-stellar-ratio=""タグによって要素の位置がずれています。私はこのコードを持っています：

<div class="slider" id="yours" data-slide="3" data-stellar-background-ratio="0.5">
<div class="container">
<div class="outer-ring" data-stellar-ratio="0.6">
<div class="inner-ring" data-stellar-ratio="-0.6" data-stellar-vertical-offset="0">
<div class="core" data-stellar-ratio="-0.3" data-stellar-vertical-offset="0"></div></div></div></div></div>

これらのcssで：

.outer-ring {
    width: 635px;
    height: 635px;
    background: url(../img/conheca/wheel-1.png) no-repeat;
    position: absolute;
    top: 50%;
    margin-top: -317px;
    left: 50%;
    margin-left: -317px;
}

.inner-ring {
    width: 478px;
    height: 478px;
    background: url(../img/conheca/wheel-2.png) no-repeat;
    position: relative;
    margin: 0px auto;
}

.core {
    width: 360px;
    height: 360px;
    background: url(../img/conheca/wheel-3.png) no-repeat;
    position: relative;
    margin: 0px auto;
}

Stellarの「data-ratio」がタグに含まれていない場合はうまく適合しますが、このパラメーターを指定すると、.inner-ringと.coreの「top」が変更されます。

水平方向の配置でこのような問題が発生しました。.containerdivには「margin：0 auto」があり、子要素は「position：relative」があるときにdivから外れていましたが、コードの「margin」部分を切り落としました。 Stellarスクリプトとそれは機能しました。

私が少し混乱していた場合は申し訳ありませんが、私がフォローしているチュートリアル（http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website）以来、これは私を狂わせています-using-stellar-js /）はこれについて言及しておらず、Stellar.jsサイトについても言及していません。ありがとう。

4

3 に答える 3

6

position: relativeすべての親要素に？があることを確認してください

また、スクリプトを呼び出すときにオフセットを設定できます。垂直スクロールのみを使用する場合は、水平スクロールを停止するだけです。

  $(window).stellar({
    horizontalScrolling: false,
    verticalOffset: 0,
    horizontalOffset: 0
  });

幸運を！

于 2013-01-09T11:48:27.033 に答える
2

このチュートリアルをお試しください：http： //coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/

stellar.jsはまだ洗練されていません。

于 2012-08-21T16:47:53.437 に答える
0

私はここで同様の問題に答えました-stellar.js背景画像の位置の問題

基本的には、恒星関数で水平スクロールが「true」に設定されているためです。

于 2014-02-23T19:22:16.117 に答える