Question

I would like to know how to achieve the parallax effect in mobile devices with a fixed background. Is there any plugin available to achieve the same? I could see that background-attachment fixed not working on mobile.

For eg: I need to achieve the same effect like the one in this, http://www.celtra.com/ad-formats (the 1st video ad in the mobile)

Any help is appreciated. Thanks in advance.

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背景附件：已修复但在IOS设备中有背景附件：已修复无法正常工作。

但上面的代码同时适用于非ios和ios设备。不需要JS。现场工作地点：http://www.thefrontlash.com/my-oh-myla/

Mobile parallax with fixed background

2 个答案: