固定背景的移动视差

Question

我想知道如何在固定背景的移动设备上实现视差效果。是否有任何插件可用于实现相同的目的？我可以看到固定的背景附件无法在移动设备上运行。

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

感谢任何帮助。提前致谢。

Answer 1

这是一个非常简单的解决方案，没有任何插件和 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";
}

Answer 2

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/

固定背景的移动视差

Mobile parallax with fixed background

html

javascript

css

mobile

parallax