视差缩小效果问题

Question

我正在试验视差并试图在滚动上获得一个很好的缩小，但我正在努力与图像变得比浏览器宽度和div的高度更小。

正如你在我的例子中看到的那样，当你向下滚动时，包装部分的红色背景是可见的。

您可以查看例如在www.adamkhourydesign.com/test

HTML

<header id="header_container"> 
    <div class="header_back"></div> 
    <div class="logo"></div> 
</header> 

CSS

#header_container { 
    position: relative; 
    height: 600px; 
    background-color: rgba(255, 100, 85, 0.5); 
    background-repeat: no-repeat; 
    background-size: auto 800px; 
    background-position: top center; 
    background-attachment: fixed; 
    overflow: hidden; 
} 

.logo { 
    height: 100px; 
    width: 100%; 
    background-image: url(../img/name.png); 
    background-position: center; 
    background-repeat: no-repeat; 
    position: absolute; 
    top: 50%; 
    margin-top: -50px; 
} 

.header_back { 
    position: relative; 
    height: 600px; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: top center; 
    background-attachment: fixed; 
    background-image: url(../img/header_bg.jpg); 
    overflow: hidden; 
} 

jQuery的

var pContainerHeight = $('#header_container').height(); 

$(window).scroll(function(){ 

    var wScroll = $(this).scrollTop(); 
    var wZoomIn = 1+(wScroll*.0005); 
    var wZoomOut = 1-(wScroll*.00005); 

    if (wScroll <= pContainerHeight) { 
    $('.header_back').css({ 
     'transform' : 'scale('+ wZoomOut +')' 
    }); 
    $('.logo').css({ 
     'transform' : 'translate(0px, '+ wScroll /0.7 +'%)' 
    }); 
    } 

Answer 1

感谢阿内尔天平，你贴我的答案设法稍微调整我的代码以使其工作。

我将背景图像移出Background属性，并将其添加为div内的图像。然后在CSS中，我制作了例如140％宽度和高度的图像。并最终抵消在这种情况下超过100％的左边余额的一半-20％。

代码现在看起来是这样的：

HTML

<header id="header_container"> 
      <div class="header_back"> 
       <img src="img/header_bg.jpg"> 
      </div> 
      <div class="logo"></div> 
    </header> 

JQUERY

var pContainerHeight = $('#header_container').height(); 

$(window).scroll(function(){ 

    var wScroll = $(this).scrollTop(); 
    var wZoomIn = 1+(wScroll*.0005); 
    var wZoomOut = 1-(wScroll*.0005); 

    if (wScroll <= pContainerHeight) { 
    $('.header_back img').css({ 
     'transform' : 'scale('+ wZoomOut +')' 
    }); 
    $('.logo').css({ 
     'transform' : 'translate(0px, '+ wScroll /0.7 +'%)' 
    }); 
    } 

CSS

#header_container { 
    position: relative; 
    height: 600px; 
    width: 100%; 
    background-color: rgba(255, 100, 85, 0.5); 
    background-repeat: no-repeat; 
    background-size: auto 800px; 
    background-position: top center; 
    background-attachment: fixed; 
    overflow: hidden; 
} 

.logo { 
    height: 100px; 
    width: 100%; 
    background-image: url(../img/name.png); 
    background-position: center; 
    background-repeat: no-repeat; 
    position: absolute; 
    top: 50%; 
    margin-top: -50px; 
} 

.header_back { 
    position: relative; 
    height: 100%; 
    width: 100%; 
    background-repeat: no-repeat; 
    background-size: 100%; 
    background-position: top center; 
    background-attachment: fixed; 
    background-color: rgba(154, 100, 85, 0.5); 
    text-align: center; 
    overflow: hidden; 
} 
.header_back img { 
    height: auto; 
    width: 140%; 
    margin-left: -20%; 
} 

Answer 2

修改你的代码，我能够得到一个smo其他视差缩小滚动，但使用background-size属性而不是transform: scale()。我通过最初缩放背景图像（例如105%），然后在向下滚动时逐渐缩小到100%。我还确保background-size不会低于100%，因此它始终覆盖整个标题区域。

CSS

... 
.header__back { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: url("http://www.adamkhourydesign.com/test/img/header_bg.jpg") top center no-repeat fixed; 
    background-size: 105%; /** the initial zoom **/ 
    overflow: hidden; 
} 
... 

的Javascript

var height = $('#header_container').height(); 
var logo = $('.logo'); 
var background = $('.header__back'); 

$(window).on('scroll', function() { 
    var scroll = $(this).scrollTop(); 

    logo.css('transform', 'translateY(' + scroll/0.7 + '%)'); 

    var backgroundSize = 105 - (5 - (height - scroll)/height * 5); 
    backgroundSize = backgroundSize < 100 ? 100 : backgroundSize; 
    background.css('background-size', backgroundSize + '%'); 
}); 

看看这个小提琴看到它在行动：parallax zoom out demo