Question

我非常喜欢视差的酷炫效果，我正在努力学习它。我在这里设置了一个简单的项目。但我似乎无法让它发挥作用。我想我已经完成了所有设置但是当我滚动图像时根本不动。任何帮助赞赏。谢谢！

HTML

<!DOCTYPE html>
 <html>
   <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <link href="https://fonts.googleapis.com/css?family=Amatic+SC" 
    rel="stylesheet">
    </head>
     <body>
     <div id="hero">
     <div class="layer layer1" data-type="parallax" data-depth='.010'></div>
     <div class="layer layer2" data-type="parallax" data-depth='.020'></div>
     <div class="layer layer3" data-type="parallax" data-depth='.050'></div>
    </div>
    <div class="text-container"></div>

   <script 
   src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
   </script>
   <script type="text/javascript" src="main.js"></script>
   </body>
   </html>

CSS

#hero {
height: 700px;
overflow: hidden;
position: relative;
}

.layer {
background-position: bottom;
background-size: auto;
background-repeat: no-repeat;
width: 100%;
height: 700px;
position: fixed;
z-index: -1;
} 

.layer1 {
background-image: url('images/2 background-.png');
}

.layer2 {
background-image: url('images/stars.png');
}

.layer3 {
background-image: url('images/moutains.png');
}

.text-container{
height: 600px;
width: 100%;
background-color: black;
}


#hero-mobile {
display: none;
background-image: url(https://s3-us-west-
2.amazonaws.com/s.cdpn.io/272781/full_illustration.png);
height: 320px;
}

@media all and (max-width: 640px) {
#hero {
 display: none;
}
#hero-mobile {
 display: block;
}
}

JS

(function() {
window.addEventListener('scroll', function(event) {
var depth, i, layer, layers, len, movement, topDistance, translate3d;
topDistance = this.pageYOffset;
layers = document.querySelectorAll("[data-type='parallax']");
for (i = 0, len = layers.length; i < len; i++) {if 
(window.CP.shouldStopExecution(1)){break;}
  layer = layers[i];
  depth = layer.getAttribute('data-depth');
  movement = -(topDistance * depth);
  translate3d = 'translate3d(0, ' + movement + 'px, 0)';
  layer.style['-webkit-transform'] = translate3d;
  layer.style['-moz-transform'] = translate3d;
  layer.style['-ms-transform'] = translate3d;
  layer.style['-o-transform'] = translate3d;
  layer.style.transform = translate3d;
  }
  window.CP.exitedLoop(1);
  });
  }).call(this);

学习视差，我被卡住了

0 个答案: