1
使用以下plugin，我构建了一个简单的视差原型。视差滚动问题（jQuery）
到目前为止，我得到这个：
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;
}
在这个顶部，我想添加一个从右侧滑动的每个幻灯片的面板。
所以：
- 一个新的幻灯片进来
- 面板从右侧滑入
- 幻灯片一起消失与面板，其将在滑入下一个幻灯片
我的意思是右边的面板的例子是here。
这个问题是，当我滑到第二个我仍然有'console.log（'从右侧滑入框'）;'这只会消失，直到第二张幻灯片触及顶部。
在幻灯片到达顶端之前，有没有一种方法可以让右侧的面板可见一点？
随时提出，我应该使用的，而不是我用的是一个任何其他插件。谢谢 – Alex
http://prinzhorn.github.io/skrollr/ – enyce12
我同意，'skrollr'是一个很好的插件。您可以使用它快速创建视差效果。 – AfromanJ