jQueryアニメーション - 複数の要素

私は一度達成したウェブページに効果を出そうとしていましたが、複数のページセクションに適用したいと思います。しかし、私は位置付けと問題のアニメーションを得ることに問題がありますjQueryアニメーション - 複数の要素

私はjQueryとslideUpメソッドを使用しています。私は次のコードを持っています。

(function() { 

    var pageEl = $('div.first-layer'); 

    $(document).on('scroll', function() { 
     pageEl.slideUp(1300, function() { $(document).off('scroll').remove(); }); 
    }); 
})();

これには望ましい効果があります。

あなたが見ることができるように私は上記のコードで一度、このアニメーションを実現するために管理しているが、私は3つの異なった要素で、スクロールにこの効果を適用することができるようにしたいです。

私のアイデアはid /クラスを付け加えることで、クラスごとに目的のスクロールポイントに達すると、クラスごとに異なるスクロールイベントが追加されました。/ idは他の2つの要素を隠します。

誰かが正しい方向を指し示すか、いくつかのアドバイスを提供することができればそれは分かります。これでしばらくの間これについた。より多くの情報をご希望の場合は、お尋ねください。

ありがとうございます。

編集：私はJSFiddleを作成しました。これは、達成しようとしていることを確認するためのものです。 https://jsfiddle.net/tdatkxrf/4/

出典

2016-06-13 Troy

あなたのフルコードを投稿するか作成する –

投稿された質問の99％は[MCVE（** M ** inimal、** C ** omplete、** V ** erifiable ** E ** xample）]（http://stackoverflow.com/help/mcve）を参照してください。 – zer00ne

私たちが話しているように心配しないで、私はplunkrを作成しています。それはかなり大きいので、あなたのソースコードを表示するのは難しい種類です。 – Troy

今、それは余分に敏感だが、ここにある、[OK]を、ので、あなたはそれはあなたがそれでもう少しプレイしている可能性があるイベントをトリガする方法に応じて：

編集： on Plunkr私は、スクロールをカウントする新しい変数を追加することで感度を変更しました。私はこれをそのままにして、両方の実装を見ることができるようにします（変数を使ったプランカ、答えなし）。 plunkr：https://plnkr.co/edit/02mko4f5ZSqSDLtlvDwR?p=preview

HTML：

<!DOCTYPE html> 
<html> 

    <head> 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <h1 style="text-align: center; font-family: helvetica;">jQuery slideUp</h1> 
    <div class="container" style="display: flex; align-items: center; flex-direction: column; position: relative; background: grey;"> 
     <div id="section-one" style="height: 300px; width: 300px; background: #cc6699;"> 
     <h1 style="text-align: center; font-family: helvetica;">Section One</h1> 
     </div> 
     <div id="section-two" style="display:none; height: 300px; width: 300px; background: #cc9966;"> 
     <h1 style="text-align: center; font-family: helvetica;">Section Two</h1> 
     </div> 
     <div id="section-three" style="display: none; height: 300px; width: 300px; background: #6699cc;"> 
     <h1 style="text-align: center; font-family: helvetica;">Section Three</h1> 
     </div> 
    </div> 
    </body> 

</html>

のjQuery：

// Code goes here 

$(document).ready(function() { 

    var e1 = $('#section-one'); 
    var e2 = $('#section-two'); 
    var e3 = $('#section-three'); 

    var sections = [e1, e2, e3]; 

$('.container').bind('mousewheel', function(e){scrollCheck(e);}); 

var scrollCheck = function(e){ 
    if(e.originalEvent.wheelDelta /120 > 0) { 
     for(i= 0; i<sections.length;i++){ 
     j=i-1; 
     if(sections[i].attr('display') != "none" && i > 0){ 
      sections[i].slideUp(1300); 
      sections[i].attr('display', "none"); 
      sections[j].slideDown(1300); 
      sections[j].attr('display', ""); 
      return; 
     } 
     } 
    } 
    else{ 
     for(i= 0; i<sections.length;i++){ 
     j=i+1; 
     if(sections[i].attr('display') != "none" && i+1 < sections.length){ 
      sections[i].slideUp(1300); 
      sections[i].attr('display', "none"); 
      sections[j].slideDown(1300); 
      sections[j].attr('display', ""); 
      return; 
     } 
     } 
    } 
    } 
});

マウスホイールのイベントを検出するためのいくつかのパッケージもありますが、あなたはそれらを見ることもできますしたい場合があります。

出典

2016-06-13 14:28:04 Spluf

私にこれを行う方法を教えてくれてありがとう、私は私のプロジェクトにそれを実装します。しかし、あなたはそれがちょっと敏感だと言っていたのですが、ユーザーが間違って同時にすべてのセクションをスクロールしないように、どうすればそれをトーンダウンできましたか？本当にありがとうが、もう一度ありがとう。 – Troy

最も簡単な方法は、スクロールイベントを矢印キーで置き換えることです。スクロールバーがあるかどうかを確認する必要はありません。また、マウスホイールパッケージにはこれのハンドラがあるかもしれません（以前は使われていません）。私はまだそのプランナーに取り組んでいるので、私は何かが働くときにあなたに知らせるでしょう。 – Spluf

私は同じことをしているが、私が行ったことよりも優れているこのパッケージを見つけました。こちらをご覧ください：http://alvarotrigo.com/fullPage/#firstPage – Spluf

jQueryアニメーション - 複数の要素

答えて

関連する問題