如何使用 HTML CSS 和 Javascript 创建 mousemove 视差效果？

在本文中，我们将学习使用 CSS 和 JavaScript 创建 Mousemove 视差效果。在 Mousemove 视差效果中，当我们移动光标时，图像以不同的速度向不同的方向移动。视差效果用于使网站更具吸引力并提高网站的交互性。视差效果是一种在不同方向以不同速度滚动或移动前景和背景图像的方法。我们可以使用任何一种组合，即文本与图像或图像与图像的组合，以创建视差效果。

方法：

• 在 标签中，创建一个
  标签来分配一些要应用视差效果的图像，为每个图像分配一个类名和值属性，负责图像的移动量。
• 对于 CSS 样式，在 style 标签中添加一些 CSS 属性，例如图像的位置和大小。
• 我们已经借助 JavaScript 来实现视差效果。在 script 标签下给出的片段中，我们创建了一个函数parallax，它使用 img 标签的类名来获取用于定位和移动目的的值。

示例：在这一步中，我们将 使用上述方法创建移动鼠标视差效果。

index.html

  
    
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: sans-serif;
      }
      body {
        background-color: rgb(102, 189, 16);
      }
      .mouse_move {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .mouse_move h2 {
        position: relative;
        font-size: 100px;
        color: white;
      }
  
      .mouse_move img {
        position: absolute;
      }
      #img1 {
        top: 80px;
        left: 80px;
        height: 250px;
        width: 250px;
      }
      #img2 {
        bottom: 80px;
        right: 80px;
        height: 250px;
        width: 250px;
      }
    
    Parallax
  
  
    
      
      GeeksforGeeks
      
    
  
    
      document.addEventListener("mousemove", parallax);
      function parallax(event) {
        this.querySelectorAll(".mouse").forEach((shift) => {
          const position = shift.getAttribute("value");
          const x = (window.innerWidth - event.pageX * position) / 90;
          const y = (window.innerHeight - event.pageY * position) / 90;
  
          shift.style.transform = `translateX(${x}px) translateY(${y}px)`;
        });
      }
    
  

输出：

从上面的示例中，您可以看到，当我们将光标从一个方向移动到另一个方向时，图像开始浮动或移动。