跟随鼠标的分层动态背景(花园SERENA同人游戏站)

warning: 这篇文章距离上次修改已过192天,其中的内容可能已经有所变动。

网站搭建于 https://akiyamamio.xyz/neko3/

屏幕截图 2021-11-04 161200.png屏幕截图 2021-11-04 161200.png


html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Senena-NekoSerenade</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="./jq.js"></script>
    <script src="./javascript.js"></script>
  </head>
  <body>
    <div class="all">
     <div class="parallax">
      <div class="h1">
        
      </div>
      <div class="h2">
        
      </div>
      <div class="h3">
    
      </div>
     </div>
      <div class="h4">
        
        
tap1 <div class="link"> tap2
tap3
tap4 </div> </div> </div> </body> </html>

js(有使用jQuery)

var currentX = '';
var currentY = '';
var movementConstant = 0.020;
$(document).mousemove(function(e) {
  if(currentX == '') 
    currentX = e.pageX;
  var xdiff = e.pageX - currentX;
  currentX = e.pageX;
  if(currentY == '') 
    currentY = e.pageY;
  var ydiff = e.pageY - currentY;
  currentY = e.pageY; 
  $('.parallax div').each(function(i, el) {
    var movement = (i + 1)  (xdiff  movementConstant);
    var movementy = (i + 1)  (ydiff  movementConstant);
    var newX = $(el).position().left + movement;
    var newY = $(el).position().top + movementy;
    $(el).css('left', newX + 'px');
    $(el).css('top', newY + 'px');
  });
});


css

html{
  background: url('./material/bg1.png') no-repeat center fixed; 
  background-size: cover;
  position:fixed;
  overflow:scroll;
  }

  div{
    position:fixed;
  }
.all{
  object-fit: contain;
  position:fixed;
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;

}

.i1{
  object-fit: contain;
  position:fixed;
  width: 100%;
  height: 100%;
}
.i2{
  object-fit: contain;
  position:fixed;
  width: 100%;
  height: 100%;
}
.i3{
  object-fit: contain;
  position:fixed;
  width: 18%;
  height: 18%;
  margin-left: 2%;
}
.i4{
  object-fit: contain;
  position:fixed;
  width: 60%;
  height: 60%;
  margin-left: 38%;
  margin-top: 12%;
}
.i5{
  object-fit: contain;
  position:fixed;
  width: 15%;
  height: 15%;
  margin-top: 10%;
}
.i6{
  object-fit: contain;
  position:fixed;
  width: 10%;
  height: 10%;
  margin-top: 22%;
  margin-left: 2%;
}
.i7{
  object-fit: contain;
  position:fixed;
  width: 10%;
  height: 10%;
  margin-top: 26%;
  margin-left: 2%;
}
.i8{
  object-fit: contain;
  position:fixed;
  width: 10%;
  height: 10%;
  margin-top: 30%;
  margin-left: 2%;
}

cat.rar

none
最后修改于:2021年11月06日 22:33

添加新评论

召唤看板娘