javascript - 当我使用 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

看看这个 fiddle :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;
}