当用户滚动到页面上的特定部分时如何放大图像？

Question

当用户在页面上滚动时，我正在放大图像。就我而言，我缩放到图像上的字母 L。然而，这一切都工作正常，我想当用户滚动到网站上的特定部分时将图像缩放到字母 L，而不是当前所做的，即图像加载后立即缩放。在我的示例中，我希望当用户滚动到 div id=“par3”时图像放大到字母 L，并在到达 div 末尾时缩小。我怎样才能实现这个目标？也许我需要事件监听器？

const d1 = document.querySelector('.d1')
const d1InitialY = d1.offsetTop
document.addEventListener("scroll", evt => {
  const r = scrollY - d1InitialY
  const s = r < 0 ? 1 : 1 + (r / 200)
  d1.style.backgroundSize = (s * 100) + '%'
})

.d1 {
  width: 50%;
  aspect-ratio: 2/1;
  position: sticky;
  top: 0;
  background-image: url(http://picsum.photos/id/451/1500/750);
  background-size: 100%;
  background-position: 72% 43%;
}

<div>
  <div id= "par1">
<p>Paragraph1 sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed. Donec interdum sit amet est non accumsan. Donec non augue feugiat, fermentum nunc non, convallis est. Cras vel ligula nec odio faucibus ultricies. Sed vulputate tortor eget pretium convallis. Cras interdum elit eget mi porta suscipit. Morbi ut velit diam. Etiam finibus eros et efficitur rutrum. Quisque viverra metus ac eleifend imperdiet. Quisque pretium ut purus vitae tempus. Duis varius risus congue velit faucibus, sed interdum purus consectetur.</p>
  </div>
<div class="d1"></div>
<div id= "par2">
<p>Paragraph2 Cras volutpat velit non mi sagittis condimentum. Cras tempor aliquet turpis sed pretium. Nunc aliquet sodales turpis quis ultrices. Duis auctor accumsan enim, quis maximus ex malesuada a. Donec a felis ut erat tempus euismod non vel neque. Proin lectus massa, sagittis at imperdiet nec, consequat ut neque. Sed vel placerat neque, vel varius urna. Vivamus interdum euismod urna a accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
  <div id= "par3">
<p>Paragraph3 Nulla rhoncus aliquam mauris, eu pretium dolor auctor in. Maecenas a sollicitudin dolor, eget commodo quam. Proin et dui sed ligula vulputate egestas. Quisque eget augue vitae purus placerat pharetra. Aliquam rhoncus convallis lorem, sed facilisis odio blandit scelerisque. Vivamus viverra urna ac nulla interdum, eget ullamcorper leo maximus. Mauris nec feugiat enim. Nam congue, dui sit amet vestibulum posuere, leo mauris fermentum lorem, eget bibendum velit nunc quis leo.</p>

<p>Paragraph3 Nulla rhoncus aliquam mauris, eu pretium dolor auctor in. Maecenas a sollicitudin dolor, eget commodo quam. Proin et dui sed ligula vulputate egestas. Quisque eget augue vitae purus placerat pharetra. Aliquam rhoncus convallis lorem, sed facilisis odio blandit scelerisque. Vivamus viverra urna ac nulla interdum, eget ullamcorper leo maximus. Mauris nec feugiat enim. Nam congue, dui sit amet vestibulum posuere, leo mauris fermentum lorem, eget bibendum velit nunc quis leo.</p>

  </div>
  <div id= "par4">
<p>Paragraph4 Sed sed cursus leo. Nam molestie eleifend leo, nec fermentum risus maximus ac. Pellentesque eget placerat ipsum. Vestibulum tempor quam justo. Fusce dapibus turpis non ante faucibus suscipit. Fusce rhoncus eleifend ipsum et lacinia. Curabitur nec congue arcu. Mauris dignissim magna ligula. Nullam ultrices, metus sit amet ultrices porttitor, turpis ligula interdum enim, eu pellentesque purus quam ut arcu. Nullam aliquet vitae tortor vel tincidunt. Fusce maximus lacus diam, sed elementum ligula condimentum vel. Sed consequat orci ac nunc gravida, at accumsan magna porttitor.</p>

<p>Mauris vulputate quam ac purus laoreet, nec ultrices eros placerat. Fusce id nisi ex. Nunc ornare tellus nisl, suscipit fermentum quam sodales sit amet. Ut ex magna, tempor nec ex sed, ornare ornare sem. Proin gravida turpis urna, vitae posuere purus consequat sit amet. Donec laoreet tempor massa. Praesent porta mauris vitae neque condimentum, non volutpat felis eleifend.</p>

<p>Aliquam aliquam a est eget cursus. Ut eu tempus justo, rutrum dapibus ex. In hac habitasse platea dictumst. Nulla ornare nisi sit amet arcu semper maximus. Praesent eu augue eget mi sodales sodales. Praesent sodales neque malesuada, euismod est in, lobortis turpis. Nam blandit facilisis mauris. Ut ac ex rhoncus, ornare velit ac, aliquam nibh. Quisque euismod mauris quis nisl consectetur vulputate. Pellentesque mattis, tellus ut dictum dictum, urna ligula sodales magna, euismod malesuada ipsum quam nec elit.</p>

<p>Duis sit amet eros non est lacinia posuere et et ex. Proin in dui ornare ex eleifend pharetra. Etiam eros urna, euismod eget porttitor et, tempor quis turpis. Nullam sollicitudin suscipit lorem, maximus pellentesque turpis dictum sed. Integer fringilla gravida tellus sit amet facilisis. Pellentesque vel porta justo. Proin vehicula eget tortor ut condimentum. Phasellus interdum urna a condimentum dapibus. Sed commodo elit a metus vestibulum, ac vehicula mi tincidunt. Duis ante quam, posuere eget purus et, mollis congue tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc quis orci porttitor, dictum libero sit amet, feugiat ipsum.</p>

<p>Nunc auctor lorem vitae neque sodales cursus. Sed scelerisque tempor tincidunt. Praesent eu pretium mi. Duis vitae venenatis nunc. Integer dolor sapien, vehicula ac dui id, fermentum malesuada justo. Donec ullamcorper enim sed nulla egestas condimentum. Etiam vitae dapibus sem, ut efficitur nulla. Donec laoreet, nunc quis aliquet blandit, erat nibh facilisis nibh, ut fermentum nisl dolor vel dui. Nunc pulvinar scelerisque urna, ut dictum purus placerat ac.</p>
  </div>

这是我的代码-

Answer 1

使用

IntersectionObserver

并在此处决定尺寸

(toPar3 ? s : 1)

。

const d1 = document.querySelector(".d1");
let toPar3 = false;
const d1InitialY = d1.offsetTop;
document.addEventListener("scroll", (evt) => {
  const r = scrollY - d1InitialY;
  const s = r < 0 ? 1 : 1 + r / 200;
  d1.style.backgroundSize = (toPar3 ? s : 1) * 100 + "%";
});
const observer = new IntersectionObserver((entries) => entries.forEach((entry) => (toPar3 = entry.isIntersecting)));
observer.observe(document.querySelector("#par3"));

body {
  height: 200vh;
}

.d1 {
  width: 50%;
  aspect-ratio: 2/1;
  position: sticky;
  top: 0;
  background-image: url(http://picsum.photos/id/451/1500/750);
  background-size: 100%;
  background-position: 72% 43%;
}

<div>
  <div id="par1">
    <p>Paragraph1 sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo
      quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed. Donec interdum sit amet est non accumsan. Donec non augue feugiat, fermentum nunc non, convallis est. Cras vel ligula nec odio faucibus ultricies. Sed
      vulputate tortor eget pretium convallis. Cras interdum elit eget mi porta suscipit. Morbi ut velit diam. Etiam finibus eros et efficitur rutrum. Quisque viverra metus ac eleifend imperdiet. Quisque pretium ut purus vitae tempus. Duis varius risus
      congue velit faucibus, sed interdum purus consectetur.</p>
  </div>
  <div class="d1"></div>
  <div id="par2">
    <p>Paragraph2 Cras volutpat velit non mi sagittis condimentum. Cras tempor aliquet turpis sed pretium. Nunc aliquet sodales turpis quis ultrices. Duis auctor accumsan enim, quis maximus ex malesuada a. Donec a felis ut erat tempus euismod non vel neque.
      Proin lectus massa, sagittis at imperdiet nec, consequat ut neque. Sed vel placerat neque, vel varius urna. Vivamus interdum euismod urna a accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
  <div id="par3">
    <p>Paragraph3 Nulla rhoncus aliquam mauris, eu pretium dolor auctor in. Maecenas a sollicitudin dolor, eget commodo quam. Proin et dui sed ligula vulputate egestas. Quisque eget augue vitae purus placerat pharetra. Aliquam rhoncus convallis lorem, sed
      facilisis odio blandit scelerisque. Vivamus viverra urna ac nulla interdum, eget ullamcorper leo maximus. Mauris nec feugiat enim. Nam congue, dui sit amet vestibulum posuere, leo mauris fermentum lorem, eget bibendum velit nunc quis leo.</p>


  </div>
  <div id="par4">
    <p>Paragraph4 Sed sed cursus leo. Nam molestie eleifend leo, nec fermentum risus maximus ac. Pellentesque eget placerat ipsum. Vestibulum tempor quam justo. Fusce dapibus turpis non ante faucibus suscipit. Fusce rhoncus eleifend ipsum et lacinia. Curabitur
      nec congue arcu. Mauris dignissim magna ligula. Nullam ultrices, metus sit amet ultrices porttitor, turpis ligula interdum enim, eu pellentesque purus quam ut arcu. Nullam aliquet vitae tortor vel tincidunt. Fusce maximus lacus diam, sed elementum
      ligula condimentum vel. Sed consequat orci ac nunc gravida, at accumsan magna porttitor.</p>

    <p>Mauris vulputate quam ac purus laoreet, nec ultrices eros placerat. Fusce id nisi ex. Nunc ornare tellus nisl, suscipit fermentum quam sodales sit amet. Ut ex magna, tempor nec ex sed, ornare ornare sem. Proin gravida turpis urna, vitae posuere purus
      consequat sit amet. Donec laoreet tempor massa. Praesent porta mauris vitae neque condimentum, non volutpat felis eleifend.</p>

    <p>Aliquam aliquam a est eget cursus. Ut eu tempus justo, rutrum dapibus ex. In hac habitasse platea dictumst. Nulla ornare nisi sit amet arcu semper maximus. Praesent eu augue eget mi sodales sodales. Praesent sodales neque malesuada, euismod est in,
      lobortis turpis. Nam blandit facilisis mauris. Ut ac ex rhoncus, ornare velit ac, aliquam nibh. Quisque euismod mauris quis nisl consectetur vulputate. Pellentesque mattis, tellus ut dictum dictum, urna ligula sodales magna, euismod malesuada ipsum
      quam nec elit.</p>

    <p>Duis sit amet eros non est lacinia posuere et et ex. Proin in dui ornare ex eleifend pharetra. Etiam eros urna, euismod eget porttitor et, tempor quis turpis. Nullam sollicitudin suscipit lorem, maximus pellentesque turpis dictum sed. Integer fringilla
      gravida tellus sit amet facilisis. Pellentesque vel porta justo. Proin vehicula eget tortor ut condimentum. Phasellus interdum urna a condimentum dapibus. Sed commodo elit a metus vestibulum, ac vehicula mi tincidunt. Duis ante quam, posuere eget
      purus et, mollis congue tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc quis orci porttitor, dictum libero sit amet, feugiat ipsum.</p>

    <p>Nunc auctor lorem vitae neque sodales cursus. Sed scelerisque tempor tincidunt. Praesent eu pretium mi. Duis vitae venenatis nunc. Integer dolor sapien, vehicula ac dui id, fermentum malesuada justo. Donec ullamcorper enim sed nulla egestas condimentum.
      Etiam vitae dapibus sem, ut efficitur nulla. Donec laoreet, nunc quis aliquet blandit, erat nibh facilisis nibh, ut fermentum nisl dolor vel dui. Nunc pulvinar scelerisque urna, ut dictum purus placerat ac.</p>
  </div>
</div>