css 如何做视差鼠标移动效果纯JavaScript

iyfjxgzm 于 2023-08-08 发布在 Java

关注(0)|答案(2)|浏览(117)

如何实现像this example这样的视差效果：
但是没有使用jQuery，使用纯JavaScript并且只使用图像？

$(document).ready(function(){
  $('#landing-content').mousemove(function(e){
    var x = -(e.pageX + this.offsetLeft) / 20;
    var y = -(e.pageY + this.offsetTop) / 20;
    $(this).css('background-position', x + 'px ' + y + 'px');
  });    
});

#landing-content {
 overflow: hidden;
 background-image: url(http://i.imgur.com/F2FPRMd.jpg);
 width: 100%;
 background-size: 150% 150%;
 background-repeat: no-repeat;
 max-height: 500px;
 border-bottom: solid;
 border-bottom-color: #628027;
 border-bottom-width: 5px;
}

.slider {
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  padding-top: 200px;
  max-width: 1002px;
}

.slider img {
 width: 80%;
 padding-left: 10%;
 padding-right: 10%;
 height: auto;
 margin-left: auto;
 margin-right: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="landing-content">
    <section class="slider"> 
        <img src="http://i.imgur.com/fVWomWz.png"/>
            
    </section>
</div>

注意：像在示例中一样，元素应该沿鼠标方向平滑移动。

css

来源：https://stackoverflow.com/questions/56025761/how-do-parallax-mouse-move-effect-pure-javascript

2条答案

按热度按时间

yc0p9oo01#

您可以根据控制背景位置的clientX/clientY坐标更新两个自定义属性，如本概念验证所示
Codepen demo

let dde = document.documentElement;
dde.addEventListener("mousemove", e => {
  let ow = dde.offsetWidth; 
  let oh = dde.offsetHeight; 
  dde.style.setProperty('--mouseX', e.clientX * 100 / ow + "%");
  dde.style.setProperty('--mouseY', e.clientY * 100 / oh + "%");
});

:root {
  --mouseX: 50%;
  --mouseY: 50%;
}

body {
  padding: 0;
  inline-size: 100%;
  min-block-size: 100dvh;
  overflow: hidden;
  background-size: auto 250%;
  background-position: var(--mouseX) var(--mouseY);
  background-repeat: no-repeat;
  background-image: url('https://www.thesprucepets.com/thmb/uQnGtOt9VQiML2oG2YzAmPErrHo=/5441x0/filters:no_upscale():strip_icc()/all-about-tabby-cats-552489-hero-a23a9118af8c477b914a0a1570d4f787.jpg');
}

<body></body>

在这个例子中，我使用了一个覆盖整个视口高度的图像，但是非常大。在初始状态，背景居中。
在JS on mousemove事件中，你可以得到鼠标的坐标（例如：clientX或clientY），并使用该值设置CSS自定义属性（--mouseX/--mouseY），该值用于背景定位。

赞(0）回复(0）举报 2023-08-08

w8ntj3qf2#

我只是将jQuery代码直接“翻译”为普通JS

//Call in document load event
document.getElementById("landing-content")
.addEventListener('mousemove', function(e) {
  var x = -(e.pageX + this.offsetLeft) / 20;
  var y = -(e.pageY + this.offsetTop) / 20;
  e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';
})

#landing-content {
  overflow: hidden;
  background-image: url(http://i.imgur.com/F2FPRMd.jpg);
  width: 100%;
  background-size: 150% 150%;
  background-repeat: no-repeat;
  max-height: 500px;
  border-bottom: solid;
  border-bottom-color: #628027;
  border-bottom-width: 5px;
}

.slider {
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  padding-top: 200px;
  max-width: 1002px;
}

.slider img {
  width: 80%;
  padding-left: 10%;
  padding-right: 10%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

<div id="landing-content">
  <section class="slider"> 
    <img src="http://i.imgur.com/fVWomWz.png">
  </section>
</div>

赞(0）回复(0）举报 2023-08-08

我来回答

css 如何做视差鼠标移动效果纯JavaScript

2条答案

相关问题

热门标签

最新问答