校正关于视差效果的图片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，因此它们被裁剪了。

  

...将图像缩放，同时保留其固有的宽高比（如果有），以最小的尺寸，使其宽度和高度都可以完全覆盖背景定位区域。

请参见background-size属性上的official specification。

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

---

您将.pic（和section）的高度设为50em，而使用的视差技术则是用来创建 panel 100vw）的类>元素，您当前正在破坏它，从而降低了效果。在高度高于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。绑定到scroll事件的视差方法很昂贵（它们在没有适当计算能力的设备上无法正常工作），并且它们只是在大多数触摸设备上失败，由于性能原因，它们阻止了滚动期间执行JavaScript。

使用简单的CSS即可达到完全相同的效果，即

background-attachment:fixed

...，而无需在滚动上绑定侦听器以更改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>