视差缩小效果问题

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-size 属性而不是 transform: scale()。我通过最初稍微放大背景图像（例如 105%）然后在向下滚动时逐渐将其缩小回 100% 来做到这一点。我还确保 background-size 不会低于 100%，这样它就会覆盖整个 header 区域。

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 + '%');
});

查看这个 fiddle 以查看它的实际效果：parallax zoom out demo

Answer 2

感谢 Arnell Balance，根据您发布的答案，我设法稍微调整了我的代码以使其正常工作。

我将背景图像从背景属性中移出，并将其作为图像添加到 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%;
}

视差缩小效果问题

Parallax zoom out effect issues

jquery

html

css

parallax

zooming