Javascript 视差双背景鼠标移动图像效果

谢谢你阅读这篇文章

我有一个包含此部分的网站：

使用此代码：

当用户移动鼠标时，我需要稍微移动一下火箭图像，我尝试通过以下更改达到此目标：

当我更改此代码时，我得到：

CSS:

原件：

  .calltoaction {padding:55px 0 360px; 
  background-image: url(../img/other/calltoaction.png), url(../img/other/b.png) ;
  background-repeat: no-repeat, no-repeat;
  background-position: bottom center, bottom center;
  background-size:cover, cover;
  overflow:hidden;
  }

  .calltoaction {padding:55px 0 360px; 
  background-image:  url(../img/other/b.png) ;
  background-repeat: no-repeat, no-repeat;
  background-position: bottom center, bottom center;
  background-size:cover, cover;
  overflow:hidden;
  z-index: 1;

  }
  .calltoactionb {
  z-index: 4;
padding:55px 0 360px;
  background-image: url(../img/other/calltoaction.png) ;
  background-repeat: no-repeat, no-repeat;
  background-position: bottom center, bottom center;
  background-size:cover, cover;
  overflow:hidden;
  }

  <div class="calltoaction wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="200ms">
      <div class="row"> <div class="col-sm-12" id="mousemoveoneindex">
          <h2 class="text-center white-text-fixed-home">Cloud Servers <strong>70</strong>% más rápidos<span class="red-color-rocket">Construimos Soluciones en <strong>Segundos</strong></span></h2>
          <div class="text-center"><a class="btn btn-success" href="https://aponte-systems.com/secure/Registro/Cloud-Panel">Regístrate en CloudPanel</a></div>
        </div> </div>  </div>


        <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
        <script type="text/javascript">
        var scene = document.getElementById('scene_index_a');
        var parallaxInstance = new Parallax(scene, {
          relativeInput: true
        });
        var scene2 = document.getElementById('scene_index_b');
        var parallaxInstance2 = new Parallax(scene2, {
          relativeInput: true
        });
        var scene3 = document.getElementById('scene_index_c');
        var parallaxInstance3 = new Parallax(scene3, {
          relativeInput: true
        });

        </script>

  <div class="calltoaction wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="200ms">  
      <div class="row"> <div class="col-sm-12" id="mousemoveoneindex">
          <h2 class="text-center white-text-fixed-home">Cloud Servers <strong>70</strong>% más rápidos<span class="red-color-rocket">Construimos Soluciones en <strong>Segundos</strong></span></h2>
          <div class="text-center"><a class="btn btn-success" href="https://aponte-systems.com/secure/Registro/Cloud-Panel">Regístrate en CloudPanel</a></div>
        </div> </div>  <div data-hover-only="yes" data-scalar-x="10" data-scalar-y="10" id="scene_index_d"><div class="calltoactionb" data-depth="0.6" > </div>  </div> </div>


        <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
        <script type="text/javascript">
        var scene = document.getElementById('scene_index_a');
        var parallaxInstance = new Parallax(scene, {
          relativeInput: true
        });
        var scene2 = document.getElementById('scene_index_b');
        var parallaxInstance2 = new Parallax(scene2, {
          relativeInput: true
        });
        var scene3 = document.getElementById('scene_index_c');
        var parallaxInstance3 = new Parallax(scene3, {
          relativeInput: true
        });
        var scene4 = document.getElementById('scene_index_d');
        var parallaxInstance4 = new Parallax(scene4, {
          relativeInput: true
        });

        </script>

更改：

  .calltoaction {padding:55px 0 360px; 
  background-image: url(../img/other/calltoaction.png), url(../img/other/b.png) ;
  background-repeat: no-repeat, no-repeat;
  background-position: bottom center, bottom center;
  background-size:cover, cover;
  overflow:hidden;
  }

  .calltoaction {padding:55px 0 360px; 
  background-image:  url(../img/other/b.png) ;
  background-repeat: no-repeat, no-repeat;
  background-position: bottom center, bottom center;
  background-size:cover, cover;
  overflow:hidden;
  z-index: 1;

  }
  .calltoactionb {
  z-index: 4;
padding:55px 0 360px;
  background-image: url(../img/other/calltoaction.png) ;
  background-repeat: no-repeat, no-repeat;
  background-position: bottom center, bottom center;
  background-size:cover, cover;
  overflow:hidden;
  }

  <div class="calltoaction wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="200ms">
      <div class="row"> <div class="col-sm-12" id="mousemoveoneindex">
          <h2 class="text-center white-text-fixed-home">Cloud Servers <strong>70</strong>% más rápidos<span class="red-color-rocket">Construimos Soluciones en <strong>Segundos</strong></span></h2>
          <div class="text-center"><a class="btn btn-success" href="https://aponte-systems.com/secure/Registro/Cloud-Panel">Regístrate en CloudPanel</a></div>
        </div> </div>  </div>


        <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
        <script type="text/javascript">
        var scene = document.getElementById('scene_index_a');
        var parallaxInstance = new Parallax(scene, {
          relativeInput: true
        });
        var scene2 = document.getElementById('scene_index_b');
        var parallaxInstance2 = new Parallax(scene2, {
          relativeInput: true
        });
        var scene3 = document.getElementById('scene_index_c');
        var parallaxInstance3 = new Parallax(scene3, {
          relativeInput: true
        });

        </script>

  <div class="calltoaction wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="200ms">  
      <div class="row"> <div class="col-sm-12" id="mousemoveoneindex">
          <h2 class="text-center white-text-fixed-home">Cloud Servers <strong>70</strong>% más rápidos<span class="red-color-rocket">Construimos Soluciones en <strong>Segundos</strong></span></h2>
          <div class="text-center"><a class="btn btn-success" href="https://aponte-systems.com/secure/Registro/Cloud-Panel">Regístrate en CloudPanel</a></div>
        </div> </div>  <div data-hover-only="yes" data-scalar-x="10" data-scalar-y="10" id="scene_index_d"><div class="calltoactionb" data-depth="0.6" > </div>  </div> </div>


        <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
        <script type="text/javascript">
        var scene = document.getElementById('scene_index_a');
        var parallaxInstance = new Parallax(scene, {
          relativeInput: true
        });
        var scene2 = document.getElementById('scene_index_b');
        var parallaxInstance2 = new Parallax(scene2, {
          relativeInput: true
        });
        var scene3 = document.getElementById('scene_index_c');
        var parallaxInstance3 = new Parallax(scene3, {
          relativeInput: true
        });
        var scene4 = document.getElementById('scene_index_d');
        var parallaxInstance4 = new Parallax(scene4, {
          relativeInput: true
        });

        </script>

HTML：

  .calltoaction {padding:55px 0 360px; 
  background-image: url(../img/other/calltoaction.png), url(../img/other/b.png) ;
  background-repeat: no-repeat, no-repeat;
  background-position: bottom center, bottom center;
  background-size:cover, cover;
  overflow:hidden;
  }

  .calltoaction {padding:55px 0 360px; 
  background-image:  url(../img/other/b.png) ;
  background-repeat: no-repeat, no-repeat;
  background-position: bottom center, bottom center;
  background-size:cover, cover;
  overflow:hidden;
  z-index: 1;

  }
  .calltoactionb {
  z-index: 4;
padding:55px 0 360px;
  background-image: url(../img/other/calltoaction.png) ;
  background-repeat: no-repeat, no-repeat;
  background-position: bottom center, bottom center;
  background-size:cover, cover;
  overflow:hidden;
  }

  <div class="calltoaction wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="200ms">
      <div class="row"> <div class="col-sm-12" id="mousemoveoneindex">
          <h2 class="text-center white-text-fixed-home">Cloud Servers <strong>70</strong>% más rápidos<span class="red-color-rocket">Construimos Soluciones en <strong>Segundos</strong></span></h2>
          <div class="text-center"><a class="btn btn-success" href="https://aponte-systems.com/secure/Registro/Cloud-Panel">Regístrate en CloudPanel</a></div>
        </div> </div>  </div>


        <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
        <script type="text/javascript">
        var scene = document.getElementById('scene_index_a');
        var parallaxInstance = new Parallax(scene, {
          relativeInput: true
        });
        var scene2 = document.getElementById('scene_index_b');
        var parallaxInstance2 = new Parallax(scene2, {
          relativeInput: true
        });
        var scene3 = document.getElementById('scene_index_c');
        var parallaxInstance3 = new Parallax(scene3, {
          relativeInput: true
        });

        </script>

  <div class="calltoaction wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="200ms">  
      <div class="row"> <div class="col-sm-12" id="mousemoveoneindex">
          <h2 class="text-center white-text-fixed-home">Cloud Servers <strong>70</strong>% más rápidos<span class="red-color-rocket">Construimos Soluciones en <strong>Segundos</strong></span></h2>
          <div class="text-center"><a class="btn btn-success" href="https://aponte-systems.com/secure/Registro/Cloud-Panel">Regístrate en CloudPanel</a></div>
        </div> </div>  <div data-hover-only="yes" data-scalar-x="10" data-scalar-y="10" id="scene_index_d"><div class="calltoactionb" data-depth="0.6" > </div>  </div> </div>


        <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
        <script type="text/javascript">
        var scene = document.getElementById('scene_index_a');
        var parallaxInstance = new Parallax(scene, {
          relativeInput: true
        });
        var scene2 = document.getElementById('scene_index_b');
        var parallaxInstance2 = new Parallax(scene2, {
          relativeInput: true
        });
        var scene3 = document.getElementById('scene_index_c');
        var parallaxInstance3 = new Parallax(scene3, {
          relativeInput: true
        });
        var scene4 = document.getElementById('scene_index_d');
        var parallaxInstance4 = new Parallax(scene4, {
          relativeInput: true
        });

        </script>

原件：

  .calltoaction {padding:55px 0 360px; 
  background-image: url(../img/other/calltoaction.png), url(../img/other/b.png) ;
  background-repeat: no-repeat, no-repeat;
  background-position: bottom center, bottom center;
  background-size:cover, cover;
  overflow:hidden;
  }

  .calltoaction {padding:55px 0 360px; 
  background-image:  url(../img/other/b.png) ;
  background-repeat: no-repeat, no-repeat;
  background-position: bottom center, bottom center;
  background-size:cover, cover;
  overflow:hidden;
  z-index: 1;

  }
  .calltoactionb {
  z-index: 4;
padding:55px 0 360px;
  background-image: url(../img/other/calltoaction.png) ;
  background-repeat: no-repeat, no-repeat;
  background-position: bottom center, bottom center;
  background-size:cover, cover;
  overflow:hidden;
  }

  <div class="calltoaction wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="200ms">
      <div class="row"> <div class="col-sm-12" id="mousemoveoneindex">
          <h2 class="text-center white-text-fixed-home">Cloud Servers <strong>70</strong>% más rápidos<span class="red-color-rocket">Construimos Soluciones en <strong>Segundos</strong></span></h2>
          <div class="text-center"><a class="btn btn-success" href="https://aponte-systems.com/secure/Registro/Cloud-Panel">Regístrate en CloudPanel</a></div>
        </div> </div>  </div>


        <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
        <script type="text/javascript">
        var scene = document.getElementById('scene_index_a');
        var parallaxInstance = new Parallax(scene, {
          relativeInput: true
        });
        var scene2 = document.getElementById('scene_index_b');
        var parallaxInstance2 = new Parallax(scene2, {
          relativeInput: true
        });
        var scene3 = document.getElementById('scene_index_c');
        var parallaxInstance3 = new Parallax(scene3, {
          relativeInput: true
        });

        </script>

  <div class="calltoaction wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="200ms">  
      <div class="row"> <div class="col-sm-12" id="mousemoveoneindex">
          <h2 class="text-center white-text-fixed-home">Cloud Servers <strong>70</strong>% más rápidos<span class="red-color-rocket">Construimos Soluciones en <strong>Segundos</strong></span></h2>
          <div class="text-center"><a class="btn btn-success" href="https://aponte-systems.com/secure/Registro/Cloud-Panel">Regístrate en CloudPanel</a></div>
        </div> </div>  <div data-hover-only="yes" data-scalar-x="10" data-scalar-y="10" id="scene_index_d"><div class="calltoactionb" data-depth="0.6" > </div>  </div> </div>


        <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
        <script type="text/javascript">
        var scene = document.getElementById('scene_index_a');
        var parallaxInstance = new Parallax(scene, {
          relativeInput: true
        });
        var scene2 = document.getElementById('scene_index_b');
        var parallaxInstance2 = new Parallax(scene2, {
          relativeInput: true
        });
        var scene3 = document.getElementById('scene_index_c');
        var parallaxInstance3 = new Parallax(scene3, {
          relativeInput: true
        });
        var scene4 = document.getElementById('scene_index_d');
        var parallaxInstance4 = new Parallax(scene4, {
          relativeInput: true
        });

        </script>

云服务器70%más rápidosConstruimos Soluciones ensegudos
var scene=document.getElementById（'scene_index_a'）；
var parallaxInstance=新视差（场景{
相对输入：真
});
var scene2=document.getElementById（'scene_index_b'）；
var parallaxInstance2=新视差（场景2{
相对输入：真
});
var scene3=document.getElementById（'scene_index_c'）；
var视差稳定3=新视差（场景3{
相对输入：真
});

更改：

  .calltoaction {padding:55px 0 360px; 
  background-image: url(../img/other/calltoaction.png), url(../img/other/b.png) ;
  background-repeat: no-repeat, no-repeat;
  background-position: bottom center, bottom center;
  background-size:cover, cover;
  overflow:hidden;
  }

  .calltoaction {padding:55px 0 360px; 
  background-image:  url(../img/other/b.png) ;
  background-repeat: no-repeat, no-repeat;
  background-position: bottom center, bottom center;
  background-size:cover, cover;
  overflow:hidden;
  z-index: 1;

  }
  .calltoactionb {
  z-index: 4;
padding:55px 0 360px;
  background-image: url(../img/other/calltoaction.png) ;
  background-repeat: no-repeat, no-repeat;
  background-position: bottom center, bottom center;
  background-size:cover, cover;
  overflow:hidden;
  }

  <div class="calltoaction wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="200ms">
      <div class="row"> <div class="col-sm-12" id="mousemoveoneindex">
          <h2 class="text-center white-text-fixed-home">Cloud Servers <strong>70</strong>% más rápidos<span class="red-color-rocket">Construimos Soluciones en <strong>Segundos</strong></span></h2>
          <div class="text-center"><a class="btn btn-success" href="https://aponte-systems.com/secure/Registro/Cloud-Panel">Regístrate en CloudPanel</a></div>
        </div> </div>  </div>


        <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
        <script type="text/javascript">
        var scene = document.getElementById('scene_index_a');
        var parallaxInstance = new Parallax(scene, {
          relativeInput: true
        });
        var scene2 = document.getElementById('scene_index_b');
        var parallaxInstance2 = new Parallax(scene2, {
          relativeInput: true
        });
        var scene3 = document.getElementById('scene_index_c');
        var parallaxInstance3 = new Parallax(scene3, {
          relativeInput: true
        });

        </script>

  <div class="calltoaction wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="200ms">  
      <div class="row"> <div class="col-sm-12" id="mousemoveoneindex">
          <h2 class="text-center white-text-fixed-home">Cloud Servers <strong>70</strong>% más rápidos<span class="red-color-rocket">Construimos Soluciones en <strong>Segundos</strong></span></h2>
          <div class="text-center"><a class="btn btn-success" href="https://aponte-systems.com/secure/Registro/Cloud-Panel">Regístrate en CloudPanel</a></div>
        </div> </div>  <div data-hover-only="yes" data-scalar-x="10" data-scalar-y="10" id="scene_index_d"><div class="calltoactionb" data-depth="0.6" > </div>  </div> </div>


        <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
        <script type="text/javascript">
        var scene = document.getElementById('scene_index_a');
        var parallaxInstance = new Parallax(scene, {
          relativeInput: true
        });
        var scene2 = document.getElementById('scene_index_b');
        var parallaxInstance2 = new Parallax(scene2, {
          relativeInput: true
        });
        var scene3 = document.getElementById('scene_index_c');
        var parallaxInstance3 = new Parallax(scene3, {
          relativeInput: true
        });
        var scene4 = document.getElementById('scene_index_d');
        var parallaxInstance4 = new Parallax(scene4, {
          relativeInput: true
        });

        </script>

云服务器70%más rápidosConstruimos Soluciones ensegudos
var scene=document.getElementById（'scene_index_a'）；
var parallaxInstance=新视差（场景{
相对输入：真
});
var scene2=document.getElementById（'scene_index_b'）；
var parallaxInstance2=新视差（场景2{
相对输入：真
});
var scene3=document.getElementById（'scene_index_c'）；
var视差稳定3=新视差（场景3{
相对输入：真
});
var scene4=document.getElementById（'scene_index_d'）；
var视差稳定4=新视差（场景4{
相对输入：真
});

---

谢谢

我对parallax.js不太熟悉，但你的部分问题可能是，你的每个背景图像的不同属性都有两个CSS值（我想是从原来有两个背景图像的地方遗留下来的），而不是每个属性只有一个值。另外，你的JS有四个视差场景，但我在HTML中只看到

#scene_index_d

。谢谢，是的，我看到了这个错误并更正了，但我继续处理相同的问题。