0

Stellar を使用して視差効果のある Web サイトに取り組んでいます: http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/

ページの中央にクラスがある「固定」の div があります。下または上にスクロールすると、「アクティブ」なスライドに応じてクラスが変わります。

私はウェイポイントを使用していますが、ページを下にスクロールするとすべてが正常に機能します。しかし、上にスクロールすると、クラスを変更する代わりに、それらはすべて次々に配置され、順序がずれ、クラスが右のスライドと一致しません。

HTML は次のとおりです (#square は固定 div です)。

<body>

<ul class="navigation">
<li id="un"     data-slide="1">Slide 1</li>
<li id="deux"   data-slide="2">Slide 2</li>
<li id="trois"  data-slide="3">Slide 3</li>
<li id="quatre" data-slide="4">Slide 4</li>
<li id="cinq"   data-slide="5">Slide 5</li>
<li id="six"    data-slide="6">Slide 6</li>
<li id="sept"   data-slide="7">Slide 7</li>
<li id="huit"   data-slide="8">Slide 8</li>
<li id="neuf"   data-slide="9">Slide 9</li>
<li id="dix"    data-slide="10">Slide 10</li>
<li id="onze"   data-slide="11">Slide 11</li>
</ul>

<div id="square" class="trans1"></div>

<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
<a class="button" data-slide="2" title=""></a>

</div><!--End Slide 1-->

<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5">

   <div class="wrapper">
      <img src="images/slide2/blur-ball.png" data-stellar-ratio="3" data-stellar-vertical-offset="-55"alt="">
      <img src="images/slide2/blur-ball-big.png" data-stellar-ratio="1" data-stellar-vertical-offset="-102"alt="">
   </div>

   <span class="slideno">Slide 2</span>
   <a class="button" data-slide="3" title=""></a>

</div><!--End Slide 2-->


<div class="slide" id="slide3" data-slide="3" data-stellar-background-ratio="0.5">
   <div class="wrapper">
   <img src="images/slide3/freelance.png" data-stellar-ratio="1.4" data-stellar-vertical-offset="-102"alt="">
   <img src="images/slide3/psdtuts.png" data-stellar-ratio="1.5" data-stellar-vertical-offset="-53"alt="">
   <img src="images/slide3/rockable.png" data-stellar-ratio="2.7" data-stellar-vertical-offset="-200"alt="">
   <img src="images/slide3/themeforest.png" data-stellar-ratio="3" data-stellar-vertical-offset="-200"alt="">
   <img src="images/slide3/tutshub.png" data-stellar-ratio="1" data-stellar-vertical-offset="-200"alt="">
   <img src="images/slide3/psdtuts.png" data-stellar-ratio="1.5" data-stellar-vertical-offset="-200"alt="">
   </div>

   <span class="slideno">Slide 3</span>
   <a class="button" data-slide="4" title=""></a>

</div><!--End Slide 3-->

<div class="slide" id="slide4" data-slide="4" data-stellar-background-ratio="0">

   <span class="slideno">Slide 4</span>
   <span class="parallaxbg">Use the parallax effects on background images too!</span>

</div><!--End Slide 4-->

そして、ここにjavascriptがあります

//1st SLIDE
    $('#square').waypoint(function(direction) {
        if (direction === 'down') {
        $('#square').toggleClass('trans1');
    }
    else {
        $('#square').toggleClass('trans1');
    }
    });

    // 2nd slide
    $('#slide2').waypoint(function(direction) {
        if (direction === 'down') {
        $('#square').toggleClass('trans2'), $('#square').removeClass('trans1');
    }
    else {
        $('#square').toggleClass('trans2'), $('#square').removeClass('trans1');
    }
    }, { offset: '50%' });

        $('#slide2').waypoint(function(direction) {
            if (direction === 'up') {
            $('#square').toggleClass('trans1'),$('#square').removeClass('trans2');
        }
        });

   //3rd slide
   $('#slide3').waypoint(function(direction) {
        if (direction === 'down') {
        $('#square').toggleClass('trans3'),$('#square').removeClass('trans2');
    }
    else {
        $('#square').toggleClass('trans3'),$('#square').removeClass('trans2');
    }}, { offset: '50%' });

        $('#slide3').waypoint(function(direction) {
                if (direction === 'up') {
            $('#square').toggleClass('trans2'),$('#square').removeClass('trans3');
            }
        });

    //4th slide
    $('#slide4').waypoint(function(direction) {
        if (direction === 'down') {
        $('#square').toggleClass('trans4'),$('#square').removeClass('trans3');
    }
    else {
        $('#square').toggleClass('trans4'),$('#square').removeClass('trans3');
    }}, { offset: '50%' });

        $('#slide4').waypoint(function(direction) {
                if (direction === 'up') {
            $('#square').toggleClass('trans3'),$('#square').removeClass('trans4');
            }
        });

ウェブサイトへのリンクは次のとおりです: http://ambuscade.ca/DEV2/

ありがとう

4

1 に答える 1

0

私のポートフォリオ サイト ( http://anti-code.com ) を作成し、パララックス スクロールをすべての方向に実行することで、コードを構造化する方法をよりオブジェクト指向にすることができます。繰り返しが少ない。

しかし、それだけではありません。あなたが抱えている問題は、クラスを削除していないためです。各スライドにあるものを切り替えるだけです。

たとえば、これがあるすべてのインスタンス:

   $('#square').toggleClass('trans2'),$('#square').removeClass('trans3');

適切に動作させるために、次のように変更できます。

  $('#square').removeAttr('class').addClass('trans2');

それが理にかなっていれば。それ以外の場合はクラスを変更していません。正方形の要素で別の trans# クラス名をオンに切り替えているだけです。切り替える前にクラス属性を最初に削除してから、オンにしたいclassNameを追加すると機能します。

于 2013-03-13T18:04:56.813 に答える