Question

所以我想制作一个用鼠标移动的背景。背景需要比屏幕大15％左右才能使效果更好。我没有使用tilable图像。

我尝试使用background-size:115%，但问题是图片是水平的，如果浏览器尺寸不够宽，我们可以看到图片的边缘。

使用background-size:cover不起作用，因为我无法设置动画，因为没有外部图像。

使用width:115%; height:115%的图片会使图片不成比例。

我在某处读过使用绝对位置和动画顶部和左边的div，它与背景上的背景相差115％会对性能造成影响，因为体尺会重新计算每一帧？

Answer 1

一个可能性是只使用Z中的变换，以及一些观点。

然后在鼠标移动时使用pespective origin

＆＃13;

var mouseMove = function(e) {
  var elem = document.getElementById('container');
  elem.style.perspectiveOrigin = e.pageX +'px ' + e.pageY + 'px';
}

window.onload = function() {
  this.addEventListener('mousemove', mouseMove);
}

＆＃13;

body, html {
  height: 100%;
  margin: 0px;
}

#container {
  width: 100%;
  height: 100%;
  position: relative;
  perspective: 400px;
}

.inner {
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: url(https://static.pexels.com/photos/51021/pexels-photo-51021.jpeg);
  background-size: cover;
  transform: translateZ(100px);
}

＆＃13;

<div id="container">
    <div class="inner">
    </div>
</div>

＆＃13;

如何在不失去比例的情况下制作视差全屏背景

1 个答案: