css 如何使图像扩展并适合滚动屏幕？

bq9c1y66 于 2023-06-07 发布在其他

关注(0)|答案(1)|浏览(186)

我有一个摄影背景和一个SVG图形作为掩模使用。我在同一个元素上使用一个图像作为背景图像，并使用svg掩码作为掩码图像，得到如下结果：
我的问题是在滚动我想扩大这一形象，使其适合屏幕上的鼠标滚动。
我是否需要任何其他第三方插件来实现这一点？
我使用了JavaScript，但没有得到想要的结果。

window.addEventListener('scroll', function() {
        const el = document.querySelector('.el');
        const scrollPercent = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight);
        const newSize = (100 + scrollPercent * 100) + 'vw';
        el.style.width = newSize;
        el.style.height = newSize;
});

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #8f7a66;
}

.el {
  width: 100vw;
  height: 100vh;
  padding: 1rem;

  background-image: url(https://images.unsplash.com/photo-1528287942171-fbe365d1d9ac?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&w=1200&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

  mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/sun.svg);
  mask-size: 50vmin;
  mask-repeat: no-repeat;
  mask-position: center;
}

<div class="el"></div>

css

来源：https://stackoverflow.com/questions/76367088/how-to-make-the-image-expand-and-fit-the-screen-on-scroll

1条答案

按热度按时间

67up9zun1#

编辑：
您已在链接的codepen中正确获取了它
几处更正：

mask-*属性需要供应商前缀
使用css变量。
只需将您设置的上限（100）删除即可。

此值是在svg内部适合最大尺寸所需的总百分比。
例如，假设内部部分是SVG大小的50%，则将限制设置为200%

const el = document.querySelector('.el');
let maskSize = 100;
el.style.setProperty("--mask-size", `${maskSize}%`);
const limit = 200;


window.addEventListener('wheel', function(event) {
  event.preventDefault();

  const scrollAmount = event.deltaY;
  maskSize += scrollAmount * -0.1;

  maskSize = maskSize < 0 ? 0 : maskSize > limit ? limit : maskSize;


  el.style.setProperty("--mask-size", `${maskSize}%`);
});

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #8f7a66;
}

.el {
  width: 100vw;
  height: 100vh;
  padding: 1rem;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  background-image: url(https://images.unsplash.com/photo-1528287942171-fbe365d1d9ac?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&w=1200&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
  -webkit-mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/sun.svg);
  -webkit-mask-size: var(--mask-size);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/sun.svg);
  mask-size: var(--mask-size);
  mask-repeat: no-repeat;
  mask-position: center;
}

<div class="el"></div>

赞(0）回复(0）举报 2023-06-07

我来回答

css 如何使图像扩展并适合滚动屏幕？

1条答案

相关问题

热门标签

最新问答