如何在看起来“固定”的图像上使用视差滚动？

Question

我正在处理视差滚动，目前有一个设置，使我的背景图像以正常内容滚动速度的50％滚动。看到这里：www.jurbs.com。 （内容在Chrome和Opera中进行了优化）

理想情况下，我希望在图像中根本没有滚动，但随着内容的滚动，图像可见性将相应地滑动并前进。这方面的例子可以在这里看到：www.tooyoungtowed.org。

下面是相关的CSS：

#content { 
z-index: 4; 
position: relative; 
max-width: 940px; 
padding: 0 10px; 
margin: 0 auto; 
line-height: 1.7; 
} 
#content article { 
    width: 300px; 
    } 
    #firstbox , 
    #secondbox, 
    #thirdbox, 
    #fourthbox { 
     padding-top: 105px; 
     } 
    #firstbox { 
     position: absolute; 
     top: 0px; 
     left: 730px; 
     } 
    #secondbox { 
     position: absolute; 
     top: 2120px; 
     left: 730px; 
     } 
    #thirdbox { 
     position: absolute; 
     top: 4240px; 
     left: 730px; 
     } 
     #content h1 { 
      margin: 0 0 25px 0; 
      font-size: 60px; 
      font-family: Helvetica, sans-serif; 
      font-weight: bold; 
      line-height: 65px; 
      } 
    #fourthbox { 
     position: absolute; 
     top: 6360px; 
     left: 730px; 
     } 
     p.whitetext{ 
      color:#fff; 
      } 
#parallax-bg3 { 
z-index: 3; 
position: fixed; 
top: 0; 
left: 50%; 
height: 1080px; 
width: 100%; 
max-width: 1920px; 
margin-left: -960px; 
} 
#bg3-1 { 
    position: absolute; 
    top: 0px; 
    } 
#bg3-2 { 
    position: absolute; 
    top: 1060px; 
    } 
#bg3-3 { 
    position: absolute; 
    top: 2120px; 
    } 
#bg3-4 { 
    position: absolute; 
    top: 3180px; 
    } 

而且parallax.js：

$(document).ready(function() { 

redrawDotNav(); 

/* Scroll event handler */ 
$(window).bind('scroll',function(e){ 
    parallaxScroll(); 
    redrawDotNav(); 
}); 

/* Next/prev and primary nav btn click handlers */ 
$('a.firstbox').click(function(){ 
    $('html, body').animate({ 
     scrollTop:0 
    }, 1000, function() { 
     parallaxScroll(); // Callback is required for iOS 
    }); 
    return false; 
}); 
$('a.secondbox').click(function(){ 
    $('html, body').animate({ 
     scrollTop:$('#secondbox').offset().top 
    }, 1000, function() { 
     parallaxScroll(); // Callback is required for iOS 
    }); 
    return false; 
}); 
$('a.thirdbox').click(function(){ 
    $('html, body').animate({ 
     scrollTop:$('#thirdbox').offset().top 
    }, 1000, function() { 
     parallaxScroll(); // Callback is required for iOS 
    }); 
    return false; 
}); 
$('a.fourthbox').click(function(){ 
    $('html, body').animate({ 
     scrollTop:$('#fourthbox').offset().top 
    }, 1000, function() { 
     parallaxScroll(); // Callback is required for iOS 
    }); 
    return false; 
}); 

/* Show/hide dot lav labels on hover */ 
$('nav#primary a').hover(
    function() { 
     $(this).prev('h1').show(); 
    }, 
    function() { 
     $(this).prev('h1').hide(); 
    } 
); 

}); 

/* Scroll the background layers */ 
function parallaxScroll(){ 
var scrolled = $(window).scrollTop(); 
$('#parallax-bg1').css('top',(0-(scrolled*.25))+'px'); 
$('#parallax-bg2').css('top',(0-(scrolled*.5))+'px'); 
$('#parallax-bg3').css('top',(0-(scrolled*.5))+'px'); 
} 

/* Set navigation dots to an active state as the user scrolls */ 
function redrawDotNav(){ 
var section1Top = 0; 
// The top of each section is offset by half the distance to the previous section. 
var section2Top = $('#secondbox').offset().top - (($('#thirdbox').offset().top - $('#secondbox').offset().top)/2); 
var section3Top = $('#thirdbox').offset().top - (($('#fourthbox').offset().top - $('#thirdbox').offset().top)/2); 
var section4Top = $('#fourthbox').offset().top - (($(document).height() - $('#fourthbox').offset().top)/2);; 
$('nav#primary a').removeClass('active'); 
if($(document).scrollTop() >= section1Top && $(document).scrollTop() < section2Top){ 
    $('nav#primary a.firstbox').addClass('active'); 
} else if ($(document).scrollTop() >= section2Top && $(document).scrollTop() < section3Top){ 
    $('nav#primary a.secondbox').addClass('active'); 
} else if ($(document).scrollTop() >= section3Top && $(document).scrollTop() < section4Top){ 
    $('nav#primary a.thirdbox').addClass('active'); 
} else if ($(document).scrollTop() >= section4Top){ 
    $('nav#primary a.fourthbox').addClass('active'); 
} 

} 

Answer 1

我认为你需要使用包装DIV为每个图像，并使用视差的DIV，而不是图像本身。点击这里查看http://teamideas.pt，这是一个我用stellar.js建立的视差效果网站。