首页 文章

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

提问于
浏览 171
1

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

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

使用 background-size:cover don 't work because I can'为它设置动画,因为没有外部图像 .

使用带有 width:115%; height:115% 的图像会使图像不成比例 .

我在某个地方读过,使用绝对位置和动画顶部和左边的div,底部的背景为115%,这对性能有害,因为体尺重新计算每一帧?

1 回答

  • 0

    一个可能性是仅使用Z中的变换,以及一些观点 .

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

    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);
    }
    
    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);
    }
    
    <div id="container">
        <div class="inner">
        </div>
    </div>
    

相关问题