固定背景的移动视差

Question

我想知道如何在固定背景的移动设备中实现视差效果。 是否有任何插件可用于实现相同的目标？ 我可以看到修复的背景附件在移动设备上不起作用。

例如：我需要达到与此相同的效果， http://www.celtra.com/ad-formats （移动设备中的第一个视频广告）

任何帮助表示赞赏。 提前致谢。

Answer 1

HTML

<div class="parallax-section">
    <div class="parallax-child-section">
        <section class="fw-main-row" id="frontlashID"></section>
    </div>
</div>

CSS

            .parallax-section {
               position: relative;
                width: 100%;
                height:700px;
            }
            .parallax-child-section {
                clip: rect(0, auto, auto, 0);
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height:700px;
            }

            #frontlashID{
                position: fixed;
                display: block;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                transform: translateZ(0);
                will-change: transform;
                z-index: 1;
            }
            .fw-main-row{
                background-attachment:scroll;
                background-image: url(###.jpg);
                background-position: center center;
                background-repeat: no-repeat;
                background-size: cover;
            }

非 IOS background-attachment:fixed 工作但在 IOS 设备 background-attachment:fixed 不起作用。

但以上代码适用于非 ios 和 ios 设备。 不需要JS。 现场工作网站： http : //www.thefrontlash.com/my-oh-myla/

Answer 2

这是一个非常简单的解决方案，没有任何插件和 jQuery。 适用于手机：

http://codepen.io/DreySkee/pen/6384ef57faaf278ed331c6c56e76fa0d

HTML：

<div id="fixed-bg"></div>

<div id="content">
    <div class="section addPadding"></div>
    <div class="section addPadding"></div>
    <div class="section"></div>
</div>

CSS：

#fixed-bg {
    position: fixed;
    width: 100%;
    background: url('http://juliewight.com/wp-content/uploads/2013/11/space-wallpaper-widescreen-2.jpg') no-repeat;
    background-size: cover;
}

#content {
    position: relative;
}

#content .section {
    height: 500px;
    width: 100%;
    background: rgba(255,255,255, 0.8);
}

JS：

var fixedBg = document.getElementById('fixed-bg');
var section = document.getElementsByClassName('section');
var sectionGap = document.getElementsByClassName('addPadding');
var h = window.innerHeight;

fixedBg.style.height = h+"px"; 

for (var i = 0; i < section.length; i++) {
  section[i].style.height =  h+"px";
}   

for (var i = 0; i < sectionGap.length; i++) {
    sectionGap[i].style.marginBottom =  h+"px";
}