Mobile parallax with fixed background

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

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;
            }

Non IOS background-attachment:fixed works but in IOS devices background-attachment:fixed don't work.

But above code works both non-ios and ios devices. No JS needed. Live working site: http://www.thefrontlash.com/my-oh-myla/

Answer 2

Here's a quite simple solution without any plugins and jQuery. Works on mobile:

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";
}