視差滾動問題（JQuery）

Question

使用以下插件 ，我正在構建一個簡單的視差原型。

到目前為止，我得到了：

HTML

<div id="one" class="js-background-1 color"> 
    <div class="box">
        <h2>Italian breakfast</h2>
        <p>bla bla</p>
    </div> 
</div>

<div id="two" class="js-background-1 color"> 
    <div class="box">
        <h2>German breakfast</h2>
        <p>bla bla</p>
    </div> 
</div> 

<div id="three" class="js-background-1 color"> 
    <div class="box">
        <h2>Box-2</h2>
        <p>bla bla</p> 
    </div>
</div>   

JS

$(document).ready(function () {

    $('.color').each(function(i) {
        var position = $(this).position(),
            positionSLider = $('.slidingPannel').position();
        $(this).scrollspy({
            min: position.top,
            max: position.top + $(this).height(),
            onEnter: function(element, position) {
                console.log('box sliding in from the right');
            },
            onLeave: function(element, position) {
                console.log('box sliding out');
            }
        });
    });
});

CSS

body{margin:0}

.color{
    z-index:9999;
}

#one{
    background: url(breakfast.jpg) 50% 0 no-repeat fixed;
    color: white;
    height: 1300px;
    margin: 0;
}

#two{
    background: url(http://120dollarsfoodchallenge.files.wordpress.com/2011/02/pancakeshortstack.jpg) 50% 20% no-repeat fixed;
    color: white;
    height: 1300px;
    margin: 0;
    padding: 160px 0 0 0;
}

#three{
    background: url(http://yourstudentbody.com/wp-content/uploads/2013/01/Athlete_-porridge-healthy-breakfast.jpg) 50% 50% no-repeat fixed;
    color: white;
    height: 1300px;
    margin: 0;
    padding: 160px 0 0 0;
}

.color{
    border-top:2px solid #030;
}

h2{
    margin:0;
}

p{
    margin-top:10px;
}

.box{
    width:400px;
    text-align:center;
    background-color:#CCC;
    opacity:0.8;
    margin:12% auto 0;
    color:#000;
    font:arial;
    padding:10px 20px;
}

在此頂部，我想為每個幻燈片添加一個從右側滑動的面板。

所以：

• 一張新的幻燈片進來了
• 右側的面板滑入
• 幻燈片與面板一起消失，面板將與下一張幻燈片一起滑動

這里是我對右面板的意思的示例。

問題是當我滑到第二個時，我仍然有“ console.log（'盒子從右邊滑入'）;' 並且只有在第二張幻燈片觸及頂部時才會消失。

有沒有辦法在幻燈片到達頂部之前稍微看到右邊的面板？

Answer 1

我建議使用JavaScript庫，例如Skrollr.js。

您將可以很好地控制動畫，最重要的是可以控制時間。

查看我們的兩個教程，以開始使用Skrollr：

• 簡單的視差滾動教程
• 如何創建視差滾動網站