アニメーションのDIV（視差など）

Question

は、各divは、ウィンドウの高さの40％のような高さを有しているが、上部に負の値に設定されていますpositionはスタックされたdivの錯覚を作成します。

私がしたいことは大きなそれをスクロールするだけでそのような（ウィンドウのheightに設定）コンテナdivの固定の高さを拡張し、スクロールにこれらのdivのをアニメーション化する、すなわち、私はスクロールで下div秒を明らかにしたいと、その視差効果の

どうすればこの問題を解決できますか？私がこれまで行ってきた何

は次のとおりです。

var position = $('.panel-wrapper').scrollTop(); 
$('.panel-wrapper').bind('mousewheel DOMMouseScroll', function (e) { 
//alert('here'); 

var scroll = $('.panel-wrapper').scrollTop(); 
//console.log(scroll); 
if (scroll > position) { 
    // console.log(parseInt($('.branding-panel').position().top) + parseInt($('.branding-panel').outerHeight(true))); 
    // console.log(parseInt(panel_top_position[0]) + parseInt(50)); 
    if (((parseInt($('.branding-panel').position().top) + parseInt($('.branding-panel').outerHeight(true))) >= (parseInt(panel_top_position[0]) + parseInt(50)))) { 
     $('.branding-panel').css('top', parseInt($('.branding-panel').css('top')) - parseInt(100)); 
    } 
    else if (((parseInt($('.advertising-panel').position().top) + parseInt($('.advertising-panel').outerHeight(true))) >= (parseInt(panel_top_position[1]) + parseInt(50)))) { 
     $('.advertising-panel').css('top', parseInt($('.advertising-panel').css('top')) - parseInt(200)); 
    } 
    else if (((parseInt($('.interactive-panel').position().top) + parseInt($('.interactive-panel').outerHeight(true))) >= (parseInt(panel_top_position[2]) + parseInt(50)))) { 
     $('.interactive-panel').css('top', parseInt($('.interactive-panel').css('top')) - parseInt(300)); 
    } 
    else if (((parseInt($('.films-panel').position().top) + parseInt($('.films-panel').outerHeight(true))) >= (parseInt(panel_top_position[3]) + parseInt(50)))) { 
     $('.films-panel').css('top', parseInt($('.films-panel').css('top')) - parseInt(320)); 
    } 

} 
else { 

} 
position = scroll; 

}); 

NOTE - 私は私の窓のような高さを固定していると私はそれをスクロールして他のdiv秒を明らかにしたいです。

助けてください。

コードが正常に動作しますが、あなたがダウンしてスクロールのためのさまざまな方法を必要とし、スクロールアップKrunal

Answer 1

、これは完璧なソリューションであることが、https://jsfiddle.net/kq6ko00r/7/

ノートこの、フィドルリンクをしようとしないかもしれない*リセット機能で値を調整微調整する。

function reset() { 
    el[0].css({ 
    top: 0 
    }); 
    el[1].css({ 
    top: -80 
    }); 
    el[2].css({ 
    top: -150 
    }); 
    el[3].css({ 
    top: -230 
    }); 
    el[4].css({ 
    top: -300 
    }); 
    el[5].css({ 
    top: -380 
    }); 

}; 

この情報がお役に立てば幸いです。.. :)

Answer 2

あなたのコードよりもその非常に単純 https://jsfiddle.net/qartal_tr/h67kpaqc/1/

.Panel{ 
    position:relative; 
    height:300px; 
    margin-bottom:-150px; 
    box-shadow:0px 4px 8px rgba(0, 0, 0, 0.15); 
    transition:all .5s ease-out; 
    top:0px; 
} 

<div class="Panel" style="background-color:red"> 
</div> 
<div class="Panel" style="background-color:green"> 
</div> 
<div class="Panel" style="background-color:purple"> 
</div> 
<div class="Panel" style="background-color:yellow"> 
</div> 
<div class="Panel" style="background-color:lightblue"> 
</div> 
<div class="Panel" style="background-color:darkgreen"> 
</div> 

$(document).ready(function(){ 
    var Z = 10000; 
    $(".Panel").each(function(){ 
    $(this).css("z-index", Z--); 
    }); 

    $(window).scroll(function(e){ 
    $(".Panel").each(function(){ 
     var ScrollHeight = $(this).offset().top - $(window).scrollTop(); 
     if(ScrollHeight < 0 && $(this).css("top") == "0px") 
      $(this).css("top", "-150px"); 
     else if(ScrollHeight >= -150 && $(this).css("top") == "-150px") 
      $(this).css("top", "0px"); 
    }); 
    }); 
});