视差浮动图像<div>

Question

如何制作这样的滚动动画？ （浮动眼镜图像比内容滚动“更快”）。

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

小提琴：小提琴

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>

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-02-06 10:21:48

视差浮动图像<div>

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-02-06 10:21:48

解决方案1
0 已采纳 2018-02-06 10:21:48