Parallax double background mouse move image effect

Question

Thanks for read this post.

I have a website with this section:

With this code:Actual Code

I need to give to the rocket image a little move when the user move the mouse, I have try to reach this goal with this changes:

When i change this codes i get:

Issue Image

CSS:

Original:

  .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;
  }

Change:

  .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;
  }

HTML:

Original:

  <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>

Change:

  <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>

Thanks