Question

感谢您阅读这篇文章。

我有一个带有此部分的网站：

使用以下代码：Actual Code

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

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

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

HTML ：

原始：

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

谢谢

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

0 个答案: