Question

我正在开发一个需要两个效果的网页：

视差滚动
屏幕上鼠标左右的“效果”。

我已经从其他代码位和小提琴中获取了一些示例，以便了解需要发生什么，但是鼠标效果存在问题。到目前为止，这是我的代码（请注意，其中一些可能是多余的或过时的，我一直在破坏大量的测试）：

$("#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元素移动到身体上。

将其余元素（不包括玻璃）移动到另一个div，使用类＆＃34; parallax＆＃34;。

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

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

P.S。不知道你想要什么偏移，所以我现在删除它来说明玻璃如何精确跟踪鼠标。

＆＃13;

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

＆＃13;

@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%);
}

＆＃13;

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

＆＃13;

将视差滚动与“鼠标跟踪器”

1 个答案: