在视差效果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 的高度，而您使用的视差技术旨在创建具有高度的面板 类元素的效果等于设备的高度 (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>