Question

所以我要创建一个完全填充视口的背景，例如：https://css-tricks.com/perfect-full-page-background-image/

但是，我还想让5张图像彼此重叠（一张原始图形的5层），它们都以相同的速率响应并调整大小，以便可以对每个单独的层应用视差效果，因此当鼠标移动时，各层的移动速度略有不同。

我只是在如何加载这些图像上停留了一点-是否将它们加载到HTML正文或CSS中？以及如何使它们彼此重叠（我尝试了一些z-index，但无济于事）。

我目前正在尝试将每个图像作为背景加载，但是显然这无法正常工作，因此我需要另一个解决方案。

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

div.home5 {
  height: 100%;
  margin: 0;
  padding: 0;
  background: url('https://www.w3schools.com/howto/img_avatar.png') no-repeat center center fixed;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -5;
}

div.home4 {
  z-index: -4;
  height: 100%;
  margin: 0;
  padding: 0;
  background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSNSvAuOC-j9NLym8Duah8cGaA_6vhov8KGH8E29j2HeHszAO1k') no-repeat center center fixed;
  background-size: cover;
  background-repeat: no-repeat;
}

div.home3 {
  height: 100%;
  margin: 0;
  padding: 0;
  background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRqCM25IBWmfkxQ3Kg_q8_SxQlBIckh-alD0sf2GDwgjN0XUm9u') no-repeat center center fixed;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -3;
}

div.home2 {
  height: 100%;
  margin: 0;
  padding: 0;
  background: url('https://www.soccercric.com/uploads/news/images/1309164275952e2e897191.png') no-repeat center center fixed;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -2;
}

div.home1 {
  height: 100%;
  margin: 0;
  padding: 0;
  background: url('http://www.gclogistics.ca/wp-content/uploads/2015/02/stefan-1-270x270.png') no-repeat center center fixed;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
}

<!-- 'Pages' -->
<div id="page1">
  &nbsp;
</div>
<div class="home5">
  &nbsp;
</div>
<div class="home4">
  &nbsp;
</div>
<div class="home3">
  &nbsp;
</div>
<div class="home2">
  &nbsp;
</div>
<div class="home1">
  &nbsp;
</div>

Answer 1

您必须将所有div固定为position:fixed，然后将所有图像作为background-image添加到每个div，这会将所有图像堆叠在一起。

现在，您要添加事件mousemove，该事件将移动所有图像，如视差效果。

这里是描述代码。

var currentX = '';
var currentY = '';
var movementConstant = 0.010;


$(document).mousemove(function(e) {
  if(currentX == '') 
    currentX = e.pageX;
  var xdiff = e.pageX - currentX;
  currentX = e.pageX;
  if(currentY == '') 
    currentY = e.pageY;
  var ydiff = e.pageY - currentY;
  currentY = e.pageY; 
  $('.parallax div').each(function(i, el) {
    var movement = (i + 1) * (xdiff * movementConstant);
    var movementy = (i + 1) * (ydiff * movementConstant);
    var newX = $(el).position().left + movement;
    var newY = $(el).position().top + movementy;
    $(el).css('left', newX + 'px');
    $(el).css('top', newY + 'px');
  });
});

html{
  overflow:hidden;
}
div{
  width:100vw;
  height:100vh;
  position:fixed;
  
}
.h1{
  background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/272781/ilu_bg.jpg');
  background-repeat:no-repeat;
  background-size:cover;
}
.h2{
  background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/272781/ilu_02.png');
  background-repeat:no-repeat;
  background-size:cover;
}
.h3{
  background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/272781/ilu_man.png');
  background-repeat:no-repeat;
  position:fixed;
  margin-left:80%;
  top:80%;
}

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>
    <div class="parallax">
      <div class="h1"></div>
      <div class="h2"></div>
      <div class="h3"></div>
    </div>
  </body>
</html>

鼠标视差对响应式完整视口背景的影响

1 个答案: