Question

如何制作这样的滚动动画？（滚动的浮动眼镜图像＆＃34;更快＆＃34;然后是内容）。

我还没有找到任何有关此功能的文章或答案＆＃34;功能＆＃34;除了常规的背景视差滚动。如果有人能指出我正确的方向，我将非常感激。

小提琴： Fiddle

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;
}

请问您是否需要澄清！

事先谢谢！：）

/ Erik

Answer 1

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

视差浮动图像<div>

1 个答案: