[英]background-image with parallax
因此,我需要在网站的某个部分中使用背景图片进行视差处理。 问题是代码从网站的开头(这是一个向下滚动的长型网站)开始计算视差,并且当我到达上述部分时,背景已经太远了。 代码中是否需要某种“延迟”,以便视差在X像素滚动后开始? 这里的代码:
JQUERY:
$(document).ready(function() {
// Cache the Window object
$window = $(window);
$('section[data-type="background"]').each(function() {
var $bgobj = $(this); // assigning the object
$(window).scroll(function() {
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
// Put together our final background position
var coords = '50% ' + yPos + 'px';
// Move the background
$bgobj.css({
backgroundPosition: coords
});
}); // window scroll Ends
});
});
HTML:
<section id="background" data-type="background" data-speed="5">
<div class="container">
<div class="shadow-block"><img src="images/shadow-b.png" alt="" class="scale-with-grid"/></div>
<div class="quote two-thirds column" >
</div>
</div>
</section>
CSS:
#background {
background: url(../images/big-bg.jpg)no-repeat center center;
background-size:cover;
width: 100%;
height:500px;
padding: 40px 0;
overflow: hidden;
position: relative;
}
你不能做这样的事情吗?
var Top = $(document).scrollTop();
if(Top < 200){
//Then do the parallax stuff...
}
不要使用“ background-size:cover” css属性,并且要注意一件事,即背景图像应大于每个视口的大小,最后滚动速度应采用降序方式,这意味着第一张幻灯片应具有更多滚动速度高于第二张幻灯片。
仅当元素显示在屏幕上时,您才可以执行视差效果:
if (($(window).scrollTop() + $(window).height()) > elementPositionTop) {
//
}
我认为就足够了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.