Мобильный параллакс с фиксированным фоном

Question

Я хотел бы знать, как добиться эффекта параллакса в мобильных устройствах с фиксированным фоном. Есть ли какой-либо плагин для достижения того же? Я видел, что фоновая привязка исправлена, не работая на мобильном устройстве.

Для например: мне нужно, чтобы достичь того же эффекта, как в этом, http://www.celtra.com/ad-formats (1-я видеорекламы в мобильном телефоне)

Любая помощь приветствуется. Заранее спасибо.

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