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建立的用于视差效果的网站。

Answer 2

现在，您可以使用 CSS：

.parallax {
  background-image: url(path/to/image.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
  width: 100vw;
  height: 100vh;

  /* This does the trick */
  background-attachment: fixed;
}

如何使用看似“固定”的图像进行视差滚动？

2 个答案: