当我使用 CSS 和 JS 向下滚动时，如何从左到右移动（动画）元素？

Question

我有一个火车图像，它位于容器底部，我想在向下滚动时从浏览器的左边缘移动到右边缘。

当页面加载时火车不应该是可见的，并且应该只在我开始向下滚动时才开始移动。

编辑：如果我向上滚动，火车应该向后移动到其原始位置。据我了解，这种运动称为视差。

我真的不知道如何在 CSS 或 jQuery 中实现这一点。

有人可以告诉我使用纯 CSS 或 jQuery 插件来实现这一目标的最佳方法是什么。

演示 https://jsfiddle.net/vq2tpavn/4/

HTML

<section id="first-section">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla diam quis turpis eleifend, ac molestie diam consectetur. In at augue tellus. Pellentesque efficitur efficitur nisl, suscipit blandit mauris. Quisque consectetur tincidunt suscipit. Nullam fermentum dictum quam vel volutpat. Phasellus eleifend molestie neque id varius. Aenean convallis ornare nisi vitae blandit. Phasellus imperdiet, diam vel congue blandit, quam felis vehicula tellus, eget lacinia dui quam vel metus. Proin eleifend volutpat magna et convallis. Nam pharetra, orci eu aliquet efficitur, turpis leo consequat purus, sed fringilla metus arcu ac elit.</p>

        <div id="trainMotion">
          <img src="http://i.imgur.com/uKxkshD.png" alt="Train" class="train">
        </div>
      </div>
    </div>
  </div>
</section>

<section id="second-section">
  <div class="container">
    <div class="row">
      <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla diam quis turpis eleifend, ac molestie diam consectetur. In at augue tellus. Pellentesque efficitur efficitur nisl, suscipit blandit mauris. Quisque consectetur tincidunt suscipit. Nullam fermentum dictum quam vel volutpat. Phasellus eleifend molestie neque id varius. Aenean convallis ornare nisi vitae blandit. Phasellus imperdiet, diam vel congue blandit, quam felis vehicula tellus, eget lacinia dui quam vel metus. Proin eleifend volutpat magna et convallis. Nam pharetra, orci eu aliquet efficitur, turpis leo consequat purus, sed fringilla metus arcu ac elit.</p>
    </div>
  </div>
</section>

<section id="third-section">
  <div class="container">
    <div class="row">
      <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla diam quis turpis eleifend, ac molestie diam consectetur. In at augue tellus. Pellentesque efficitur efficitur nisl, suscipit blandit mauris. Quisque consectetur tincidunt suscipit. Nullam fermentum dictum quam vel volutpat. Phasellus eleifend molestie neque id varius. Aenean convallis ornare nisi vitae blandit. Phasellus imperdiet, diam vel congue blandit, quam felis vehicula tellus, eget lacinia dui quam vel metus. Proin eleifend volutpat magna et convallis. Nam pharetra, orci eu aliquet efficitur, turpis leo consequat purus, sed fringilla metus arcu ac elit.</p>
    </div>
  </div>
</section>

CSS

*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html, body {
    width: 100%;
    height: 100%;
}
body {
    background-color: #191617;
}
section {
    padding: 130px 0;
}
section::before,
section::after {
    position: absolute;
    content: '';
    pointer-events: none;
}
#first-section {
    background-color: #dcdbdc;
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 3rem;
}
#second-section {
    background-color: #f1646a;
    color: white;
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 3rem;
}
#third-section {
    background-color: lightblue;
    color: white;
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 3rem;
}

.train {
    display: block;
    max-width: 100%;
    position: absolute;
    bottom: -70px;
    opacity: 1;
    transition: all 0.9s ease-out;
    transform: translate(-50%, 100%);
}

Answer 1

看看这个小提琴：https : //jsfiddle.net/TimothyKanski/vq2tpavn/8/

您可以使用一些 jquery 方法获取总页面高度和当前滚动。然后，我想，你只需要使用这些值来得到一个百分比，然后移动火车。

var current = $(window).scrollTop();
var total = $(window).height() - current;
var ele = $(".train");
var currPosition = ele.position().left + 320;
var trackLength = 300;
$(window).scroll(function (event) {
    current = $(window).scrollTop();
    var newPosition = trackLength * (current/total)
    ele.css({left:currPosition+newPosition+'px'});
});

编辑：

为了让火车不会导致水平滚动条，请overflow: hidden;为 Section放入css：

Section{
  ...
  overflow: hidden;
}