校正图片上的视差效果 jQuery

Question

我有一个视差效果，我用来在这个图片网站上工作，但我想知道为什么它会剪裁图片以及我如何纠正上述问题。 每当我向下滚动一定长度时，它就会切断图片并开始下一张，但随后又将另一张重新置于顶部。 当您到达底部图片时，它显示顶部在底部和底部在顶部。

jQuery 视差

<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属性的官方规范。

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

---

您给.pic （和section ）的高度为50em而您正在使用的视差技术旨在创建50em面板的元素的效果，其高度等于设备的高度（ 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>