0

私はパララックスのウェブサイトに取り組んでいます。視差は、すべてが背景画像 (さまざまな速度で移動する画像) であることに依存しています。

画像にせずにテキストも制御する方法はありますか? コントロールとは、視差画像が動いている間に固定するということですか？位置を固定しないと、デフォルトのページ速度 (視差よりも速い) で画像を通過するだけです。

私は position:fixed と z-index で遊んでいます - これはある程度機能します: http://jsfiddle.net/bf8Zh/1/。問題は、ページを下に行くほどすべてが少しうまくいかないことです-重複など

上記の jsfiddle は、position:fixed/z-index を使用して問題を回避する例です。

CSS の例:

#intro,
#two,
#three,
#four {width: 100%; margin: 0 auto; height: 800px; overflow: hidden; background-position: 50% 50% !important;}

#intro {background:url(../img/bg_1.jpg) 50% 50% no-repeat fixed #000;}
#two {background:url(../img/bg_7.jpg) 50% 50% no-repeat fixed; z-index: 25; position: relative;}
#three {background:url(../img/bg_8.jpg) 50% 50% no-repeat fixed #ccc; z-index: 9999; position:relative}
#four {background:url(../img/bg_7.jpg) 50% 50% no-repeat fixed;}

#two .content {width: 300px; margin: 300px 0 0 200px; float: left; z-index: 50; position: fixed; top: 0; left: 0}
#two .content .sectionTitle {font-size: 36px; margin: 10px 0; z-index: 50;}
#two .content .sectionText {font-size: 12px; margin: 10px 0; z-index: 50;}
#two .content .sectionTags {font-size: 12px; margin: 10px 0; z-index: 50;}

#three .content {width: 300px; margin: 300px 200px 0 0; float: right; z-index: 100;}
#three .content .sectionTitle {font-size: 36px; margin: 10px 0; z-index: 100;}
#three .content .sectionText {font-size: 12px; margin: 10px 0; z-index: 100;}
#three .content .sectionTags {font-size: 12px; margin: 10px 0; z-index: 100;}
4

2 に答える 2

1

画像にせずにテキストの速度も制御する方法はありますか?

好きな速度でテキストをアニメーション化できます。あなたのフィドルは私にはうまくいきませんでした（出力用の黒いフレームだけ）が、基本は次のとおりです。

jQuery(function($) {

  $("button").click(function() {
    $("#sometext").animate({
          left: "+500"
        },
        500 // This is the duration, in milliseconds
    );
  });
});

アニメーションにかかる時間をanimate関数に指定できます。

実例| ソース- この例では、時間を 250 ミリ秒から 750 ミリ秒まで変化させています。

于 2012-06-13T12:45:44.460 に答える
0

うまくいくように見える解決策は、jQuery inview プラグインを使用することです - http://remysharp.com/downloads/jquery.inview.js

$('#seven, #three').bind('inview', function (event, visible) {
        if (visible == true) {
            $(this).addClass("active");
        }else{
            $(this).removeClass("active");
        }
    });

上記のコードを使用して、スクロールして表示されたページにアクティブなクラスを追加し、後でクラスを削除することをお勧めします。問題のページの z-index を変更するアクティブなクラス。position:fixed を使用したテキストで、これまでのところ動作しているようです。

#three {background:url(../img/bg_grey.jpg) 50% 50% no-repeat fixed;height: 2800px; position: relative; z-index: 800;}
#three.active {background:url(../img/bg_grey.jpg) 50% 50% no-repeat fixed;height: 2800px; position: relative; z-index: 850;}
于 2012-06-13T15:36:11.020 に答える