jquery - 在视差效果jQuery上校正图片

Question

我在处理这个图片网站时使用了视差效果，但我想知道为什么它会剪裁图片以及如何纠正上述问题。 每当我向下滚动一定长度时，它就会剪掉图片并开始下一张，但随后又会把另一张放回顶部。 当您到达底部图片时，它显示顶部在底部和底部在顶部。

jQuery Parallax

<section class="home">
  <div class="pic img1 parallax"></div>
  <div class="pic img2 parallax"></div>
  <div class="pic img3 parallax"></div>
  <div class="pic img4 parallax"></div>
</section>


body {
  box-sizing: border-box;
  margin: 0;
}

section {
  width: 100%;
  height: 50em;
}

.pic {
  width: 100%;
  height: 50em;
  background-size: cover;
  background-position: center;
}

.img1 {
  background-image: url('https://images.unsplash.com/photo-1536164832230-6c238c58f740?ixlib=rb-0.3.5&s=09987436d4a89cf8c848c93aa574dfda&auto=format&fit=crop&w=1650&q=80');
}

.img2 {
  background-image: url('https://images.unsplash.com/photo-1536221236547-04007cfc3d8b?ixlib=rb-0.3.5&s=426505fd76bd618fdd95640f8870e38c&auto=format&fit=crop&w=1650&q=80');
}

.img3 {
  background-image: url('https://images.unsplash.com/photo-1536171010494-d89014448ca1?ixlib=rb-0.3.5&s=4f7b5d0b81a5f1e1445a86fd9a251a46&auto=format&fit=crop&w=1576&q=80');
}

.img4 {
  background-image: url('https://images.unsplash.com/photo-1536108978996-128e3e2a9783?ixlib=rb-0.3.5&s=31ce21b0ec2bb391c601c681fc1c7952&auto=format&fit=crop&w=1475&q=80');
}

//jQuery Parallax
$(document).ready(function() {

  $(window).scroll(function() {
    parallax();
  })

  function parallax() {

    var wScroll = $(window).scrollTop();
    //select element, class, id etc and property
    $('.pic').css('background-position', 'center ' +(wScroll)+'px')
    //you can also change speed 
  }
});

Answer 1

导致图片被裁剪的不是视差脚本。它们被裁剪是因为您使用的是 background-size:cover，这...

... scales the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.

参见 official specification在 background-size 属性上。

我的回答到此结束，但我还会针对您当前使用的内容添加一些注意事项，希望您会发现它有用。

---

您为 .pic(和 section)提供 50em 的高度，而您使用的视差技术旨在创建高度等于设备高度 (100vw) 的类似于 panel 的元素的效果，而您目前正在破坏它，从而降低了效果。在高度高于 50em 的设备上，您的图像将比屏幕短，您会看到下一个的顶部，而在低于 50em 的设备上，用户将需要在下一张图片开始揭幕之前滚动一下。您可以通过调整浏览器窗口的全宽和正常高度的一半来测试这一点，您就会明白我在说什么。

调整此示例的大小并将其与调整大小的示例进行比较:

$(document).ready(function() {
  $(window).scroll(function() {
    parallax();
  })
  function parallax() {
    var wScroll = $(window).scrollTop();
    $('.pic').css('background-position', '50% ' +(wScroll)+'px')
  }
});

body {
  box-sizing: border-box;
  margin: 0;
}

section, .pic {
  width: 100%;
  height: 100vh;
}

.pic {
  background-size: cover;
}

.img1 {
  background-image: url('https://images.unsplash.com/photo-1536164832230-6c238c58f740?ixlib=rb-0.3.5&s=09987436d4a89cf8c848c93aa574dfda&auto=format&fit=crop&w=1650&q=80');
}

.img2 {
  background-image: url('https://images.unsplash.com/photo-1536221236547-04007cfc3d8b?ixlib=rb-0.3.5&s=426505fd76bd618fdd95640f8870e38c&auto=format&fit=crop&w=1650&q=80');
}

.img3 {
  background-image: url('https://images.unsplash.com/photo-1536171010494-d89014448ca1?ixlib=rb-0.3.5&s=4f7b5d0b81a5f1e1445a86fd9a251a46&auto=format&fit=crop&w=1576&q=80');
}

.img4 {
  background-image: url('https://images.unsplash.com/photo-1536108978996-128e3e2a9783?ixlib=rb-0.3.5&s=31ce21b0ec2bb391c601c681fc1c7952&auto=format&fit=crop&w=1475&q=80');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<section class="home">
  <div class="pic img1 parallax"></div>
  <div class="pic img2 parallax"></div>
  <div class="pic img3 parallax"></div>
  <div class="pic img4 parallax"></div>
</section>

---

但您可以做出的最大改进可能就是完全抛弃 JavaScript。绑定(bind)在 scroll 事件上的视差方法代价高昂(它们在没有像样的计算能力的设备上不能流畅地工作)并且它们在大多数触摸设备上都会失败，出于性能原因，在滚动期间阻止 JavaScript 执行。

使用简单的 CSS 也可以实现完全相同的效果，即

background-attachment:fixed

...无需在滚动时绑定(bind)监听器以更改 background-position。它几乎适用于任何设备，无论计算能力如何，也适用于触摸设备:

body {
  box-sizing: border-box;
  margin: 0;
}

section, .pic {
  width: 100%;
  height: 100vh;
}

.pic {
  background-size: cover;
  background-attachment: fixed;
  background-position: 50% 50%;
}

.img1 {
  background-image: url('https://images.unsplash.com/photo-1536164832230-6c238c58f740?ixlib=rb-0.3.5&s=09987436d4a89cf8c848c93aa574dfda&auto=format&fit=crop&w=1650&q=80');
}

.img2 {
  background-image: url('https://images.unsplash.com/photo-1536221236547-04007cfc3d8b?ixlib=rb-0.3.5&s=426505fd76bd618fdd95640f8870e38c&auto=format&fit=crop&w=1650&q=80');
}

.img3 {
  background-image: url('https://images.unsplash.com/photo-1536171010494-d89014448ca1?ixlib=rb-0.3.5&s=4f7b5d0b81a5f1e1445a86fd9a251a46&auto=format&fit=crop&w=1576&q=80');
}

.img4 {
  background-image: url('https://images.unsplash.com/photo-1536108978996-128e3e2a9783?ixlib=rb-0.3.5&s=31ce21b0ec2bb391c601c681fc1c7952&auto=format&fit=crop&w=1475&q=80');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<section class="home">
  <div class="pic img1 parallax"></div>
  <div class="pic img2 parallax"></div>
  <div class="pic img3 parallax"></div>
  <div class="pic img4 parallax"></div>
</section>