问题
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.
回答1:
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";
}
回答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;
}
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/
来源:https://stackoverflow.com/questions/30848649/mobile-parallax-with-fixed-background