视差浮动图像 <div>

Question

如何制作这样的滚动动画？（滚动的浮动眼镜图像 "faster" 然后是内容）。

除了常规的背景视差滚动，我还没有找到关于此 "feature" 的任何文章或答案。如果有人能指出正确的方向，我将不胜感激。

HTML:

  <body>
    <div class="floating-img"></div>
    <div class="site-width">
      <h2 class="content-heading">Content heading</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat enim at metus posuere maximus eget in enim. Nunc massa metus, laoreet vel sem nec, lacinia bibendum diam. Ut rutrum lacus vitae feugiat fringilla. Sed id ultricies magna. Curabitur
        aliquam cursus est quis pretium. Fusce vel arcu eget felis eleifend tempor. Donec molestie eu urna in gravida.
        <br>
        <br> Nam feugiat mauris elementum, aliquam purus non, ultrices orci. Fusce venenatis ac nisl sed eleifend. Integer convallis orci ut ante laoreet, id ullamcorper tortor iaculis. Suspendisse feugiat est et dolor maximus, eget egestas elit tempor. Pellentesque
        quis diam aliquam, ornare dolor ac, ultricies ligula. Duis non mollis justo. Nunc arcu justo, commodo eu eros non, faucibus viverra diam. Sed nec ipsum vitae neque consectetur malesuada lobortis id nisl. Class aptent taciti sociosqu ad litora
        torquent per conubia nostra, per inceptos himenaeos. Donec dictum varius massa id egestas. Quisque feugiat dolor ligula, eget ultrices lorem faucibus eu. Morbi hendrerit posuere eleifend. Sed eu fringilla mauris, ornare tincidunt nisl. Nulla id
        sollicitudin nisi, in interdum neque. Cras vulputate rhoncus ante, sit amet auctor nisl suscipit sit amet.
        <br>
        <br> Aenean ultricies feugiat arcu, in varius lorem lacinia quis. Quisque elementum lorem egestas, pellentesque tortor ut, auctor risus. Nullam nec augue vel tortor lobortis pulvinar. Nulla ultricies nunc ut tristique sagittis. Donec pulvinar purus
        ut elementum commodo. Etiam elementum odio vel est ultricies, ac dapibus tortor eleifend. Nullam cursus quam arcu, quis bibendum ex molestie non. Phasellus convallis tincidunt fermentum.
    </div>
  </body>

</html>

CSS:

.floating-img {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('https://familytime.io/img/ios-app-block-before.png');
  background-repeat: no-repeat;
  background-size: 20%;
  z-index: -1;
}

.site-width {
  padding: 0px 50px;
}

.content-heading {
  text-align: center;
}

请问您是否需要任何说明！

先谢谢了！ :)

/埃里克

Answer 1

我找到了你一直在寻找的东西。这是一个非常好的 js 库，它可以完全满足您的需求：http://mmkjony.github.io/enllax.js/

视差浮动图像 <div>

Parallax floating image <div>

jquery

html

css

parallax