背景图像与视差

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了背景图像与视差相关的知识,希望对你有一定的参考价值。

所以我需要一个网站的一部分与背景图像的视差。问题是代码从网站的开头计算视差(它是一个长的向下滚动类型的网站),当我到达上述部分时,背景已经太过分了。在代码中需要某种“延迟”,以便在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) {
   //
}

我认为这就足够了。

以上是关于背景图像与视差的主要内容,如果未能解决你的问题,请参考以下文章

仅在 Chrome/Safari 中滚动嵌入 Vimeo YouTube 或 Flash 时,浮动视差 DIV 背景图像会跳转

告诉 UIPageViewController 何时滚动(用于图像的视差滚动)

使用ORB在OpenCV中生成密集视差图

如何在片段着色器中平铺部分纹理

视差滚动技术的简介及运用

视差滚动原理与实现