文字图片视差效果：动态的HTML+CSS+JS实现

2024-01-31 01:05:36

文字图片视差效果的实现原理

文字图片视差效果的实现原理并不复杂。它主要是利用了 CSS 中的 transform 属性。transform 属性可以对元素进行平移、旋转、缩放等变换。在文字图片视差效果中，我们会使用 transform 属性来对文字或图像进行平移变换。当视窗滚动时，我们会使用 JavaScript 代码来改变 transform 属性的值，从而使文字或图像产生视差效果。

实现文字图片视差效果的步骤

首先，我们需要定义一段文字或图像，并将其添加到网页中。
然后，我们需要使用 CSS 样式来定义文字或图像的视差效果。
最后，我们需要使用 JavaScript 代码来控制视差效果的动画。

具体实现代码

<!DOCTYPE html>
<html>
<head>
  
  <style>
    body {
      height: 100vh;
      overflow: scroll;
    }

    #text {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <div id="text">
    <h1>文字图片视差效果</h1>
    <p>这是我网上看到的一外国博主的创意，感觉不错，马上自己也敲了一个，果然不错~</p>
  </div>

  <script>
    window.addEventListener('scroll', function() {
      var scrollTop = window.pageYOffset;
      var text = document.getElementById('text');

      text.style.transform = 'translate(-50%, ' + scrollTop / 2 + 'px)';
    });
  </script>
</body>
</html>