javascript - 将视差滚动与 "mouse tracker"相结合

Question

我正在处理需要具有两种效果的页面:

1. 视差滚动
2. 跟随鼠标在屏幕上移动的“效果”。

我已经从其他代码位和 fiddles 中获取示例来了解需要发生什么的一般概念，但是鼠标效果存在问题。到目前为止，这是我的代码(请注意其中一些可能是多余的或过时的，我已经用它破坏了很多测试):

$("#imageholder").on("mousemove", function(e){
  var ofst = ($(window).width() - 1024)/2;
  $("#glass").css({
    left :  Math.round(e.pageX - 60 - ofst) + "px",
    top : Math.round(e.pageY - 60 )  + "px"
  });
});

@import url(http://fonts.googleapis.com/css?family=Nunito);

html {
  height: 100%;
  overflow: hidden;
}

body { 
  margin:0;
  padding:0;
	perspective: 1px;
	transform-style: preserve-3d;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  font-family: Nunito;

}

h1 {
   font-size: 250%
}

p {
  font-size: 140%;
  line-height: 150%;
  color: #333;

}

.slide {
  position: relative;
  padding: 25vh 10%;
  min-height: 100vh;
  width: 100vw;
  box-sizing: border-box;

	transform-style: inherit;
  
}



.slide:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left:0;
  right:0;
}

.title {
  width: 50%;
  padding: 5%;
  border-radius: 5px;
  box-shadow: 0 0 8px rgba(218,165,32, .7);
  background: -webkit-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 33%,rgba(71,71,71,1) 39%,rgba(0,0,0,1) 45%,rgba(0,0,0,1) 46%,rgba(17,17,17,1) 19%,rgba(44,44,44,1) 58%,rgba(44,44,44,1) 71%,rgba(43,43,43,1) 64%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.slide:nth-child(2n) .title {
  margin-left: 0;
  margin-right: auto;
}

.slide:nth-child(2n+1) .title {
  margin-right: auto;
  margin-left: 0;
}

.slide, .slide:before {
  background: 50% 50% / cover;  
}



#title {
  background-image: url("http://placehold.it/350x150");
   background-attachment: fixed;  
}

#slide3:before {
  //CAN USE IMAGE OR GRADIENT BG!
  //background-image: url("http://www.clipartbest.com/cliparts/9iz/obB/9izobBr4T.jpeg");
    background: -webkit-linear-gradient(top,rgba(218,165,32,0)60%,rgba(218,165,32,1) 100%);
  transform: translateZ(-1px) scale(2);
  z-index:-1;
}


#imageholder {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

#glass {
  position: relative;
  width: 120px;
  height: 120px;
  display: block;
}
#glass:before {
  position: absolute;
  display: block;
  width: 100px;
  height: 100px;
  top: 3px;
  left: 3px;
  content: "";
background: blue;
  background-repeat: no-repeat;
  border-radius: 100px;
  -webkit-filter: blur(0px);
  background-position: top center;
  background-attachment: fixed;
  border: 2px solid rgba(255,255,255,0.4);
  z-index: 898;
  zoom:1.1;
}
#glass:after {
  position: absolute;
  background: #000;
  width: 120px;
  height: 120px;
  content:"";
  display: block;
  border-radius: 100px;
  background-repeat: no-repeat;
  background:blue;
  background-position: top center;
  background-attachment: fixed;
  z-index: 889;
    -webkit-filter: blur(1px) saturate(120%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imageholder">
<div id="slide3" class="slide">

  <div class="title">


    <h1>Title</h1> 
    <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
  </div>
   

  <div id="glass"></div>
</div>
</div>

我遇到的问题是视差对本应跟踪鼠标的“玻璃”也有影响。如果此代码有效，无论您将鼠标移动到哪里，“玻璃杯”都会在其上方。

这是我可以用一些 JQuery 解决的问题，还是我应该修改 CSS 来解决这个问题？

Answer 1

有点像这样？

将玻璃 div 元素移至正文。

将其余元素(不包括玻璃)移动到另一个类为“parallax”的 div。

仅对上面的 div 应用视差效果。

将 mousemove 事件更改为文档级别。

附言不确定您想要什么偏移量，所以我暂时将其删除以演示玻璃如何精确跟踪鼠标。

$(document).on("mousemove", function(e){
  $("#glass").css({
    left :  Math.round(e.pageX - 60) + "px",
    top : Math.round(e.pageY -60)  + "px"
  });
});

@import url(http://fonts.googleapis.com/css?family=Nunito);

html {
  height: 100%;
  overflow: hidden;
}

body { 
  margin:0;
  padding:0;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  font-family: Nunito;
}
.parallax{
	perspective: 1px;
	transform-style: preserve-3d;
}
h1 {
   font-size: 250%
}

p {
  font-size: 140%;
  line-height: 150%;
  color: #333;

}

.slide {
  position: relative;
  padding: 25vh 10%;
  min-height: 100vh;
  width: 100vw;
  box-sizing: border-box;

	transform-style: inherit;
  
}



.slide:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left:0;
  right:0;
}

.title {
  width: 50%;
  padding: 5%;
  border-radius: 5px;
  box-shadow: 0 0 8px rgba(218,165,32, .7);
  background: -webkit-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 33%,rgba(71,71,71,1) 39%,rgba(0,0,0,1) 45%,rgba(0,0,0,1) 46%,rgba(17,17,17,1) 19%,rgba(44,44,44,1) 58%,rgba(44,44,44,1) 71%,rgba(43,43,43,1) 64%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.slide:nth-child(2n) .title {
  margin-left: 0;
  margin-right: auto;
}

.slide:nth-child(2n+1) .title {
  margin-right: auto;
  margin-left: 0;
}

.slide, .slide:before {
  background: 50% 50% / cover;  
}



#title {
  background-image: url("http://placehold.it/350x150");
   background-attachment: fixed;  
}

#slide3:before {
  //CAN USE IMAGE OR GRADIENT BG!
  //background-image: url("http://www.clipartbest.com/cliparts/9iz/obB/9izobBr4T.jpeg");
    background: -webkit-linear-gradient(top,rgba(218,165,32,0)60%,rgba(218,165,32,1) 100%);
  transform: translateZ(-1px) scale(2);
  z-index:-1;
}


#imageholder {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

#glass {
  position: fixed;
  width: 120px;
  height: 120px;
  display: block;
}
#glass:before {
  position: absolute;
  display: block;
  width: 100px;
  height: 100px;
  top: 3px;
  left: 3px;
  content: "";
background: blue;
  background-repeat: no-repeat;
  border-radius: 100px;
  -webkit-filter: blur(0px);
  background-position: top center;
  background-attachment: fixed;
  border: 2px solid rgba(255,255,255,0.4);
  z-index: 898;
  zoom:1.1;
}
#glass:after {
  position: absolute;
  background: #000;
  width: 120px;
  height: 120px;
  content:"";
  display: block;
  border-radius: 100px;
  background-repeat: no-repeat;
  background:blue;
  background-position: top center;
  background-attachment: fixed;
  z-index: 889;
    -webkit-filter: blur(1px) saturate(120%);
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parallax">
    <div id="imageholder">
    <div id="slide3" class="slide">

      <div class="title">


        <h1>Title</h1> 
        <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
      </div>
       

    </div>
    </div>
    </div>
      <div id="glass"></div>