[英]Parallax scrolling issue (JQuery)
Using the following plugin , I am building a simple parallax prototype. 使用以下插件 ,我正在构建一个简单的视差原型。
So far I got this: 到目前为止,我得到了:
HTML 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 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 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;
}
On the top of this I would like to add a panel sliding from the right for each slide. 在此顶部,我想为每个幻灯片添加一个从右侧滑动的面板。
So: 所以:
An example of what I mean for the right panel is here . 这里是我对右面板的意思的示例。
The problem with this is that when I slide to the second one I still have 'console.log('box sliding in from the right');' 问题是当我滑到第二个时,我仍然有“ console.log('盒子从右边滑入');' and this will only disappear until the second slides touches the top.
并且只有在第二张幻灯片触及顶部时才会消失。
Is there a way of having the panel from the right be visible a bit before the slides reaches the top? 有没有办法在幻灯片到达顶部之前稍微看到右边的面板?
I would recommend using a JavaScript library such as Skrollr.js. 我建议使用JavaScript库,例如Skrollr.js。
You will have a great control of your animations and most importantly the timing. 您将可以很好地控制动画,最重要的是可以控制时间。
Check our these two tutorials to get you started with Skrollr: 查看我们的两个教程,以开始使用Skrollr:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.