Question

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

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

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

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

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

DEMO 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;放入css for section：

Section{
  ...
  overflow: hidden;
}

Answer 2

这是你的小提琴的微创版本：https://jsfiddle.net/vq2tpavn/6/

<强>的JavaScript

var windowHeight =  Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
    train = document.getElementById('trainMotion');

window.addEventListener('scroll', function(event) {
      var offset = train.getBoundingClientRect().top - windowHeight;

      if (offset > 0) {
        train.classList.remove('choochoo');
        return;
      }

      if (train.className.indexOf('choocho') === -1) {
        train.classList.add('choochoo');
      }
});

其他CSS

#trainMotion img {
    transform: translate(-50%, 0%);
}

#trainMotion.choochoo img {
    transition: all 0.9s ease-out;
    transform: translate(0%, 0%);
}

作为一个小修改，我将整个#trainMotion移动到该区域之外（计算相对于窗口高度的填充内的绝对位置偏移是在凌晨3点进行的）。

（我还没有检查过它是否符合跨浏览器的兼容性 - 但在Chrome中它运行正常）

更新（反映火车向两个方向前进）

又名：这是一个非常差的人眼视差。

这里是小提琴：https://jsfiddle.net/vq2tpavn/12/

的JavaScript

var windowHeight =  Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
    lastTop;

window.addEventListener('scroll', function(event) {
  var train = document.getElementById('trainMotion'),
      top = train.getBoundingClientRect().top,
      offset = top - windowHeight;

      if (offset > 0) {
        train.classList.remove('choochoo');
        return;
      }

      if (top < windowHeight / 2 && top > lastTop) {
        train.classList.remove('choochoo');
      }

      if (train.className.indexOf('choocho') === -1 && top < lastTop) {
        train.classList.add('choochoo');
      }

      lastTop = top;

});

CSS

#trainMotion img {
    transform: translate(-50%, 0%);
    transition: all 1s ease-out;
}

#trainMotion.choochoo img {
    transform: translate(0%, 0%);
}

HTML ...

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

<section id="second-section">
    ...

Answer 3

试试此代码

    var lastScrollTop = 0;
  ``$("#first-section").scroll(function (event) {
    var st = $(this).scrollTop();
    if (st > lastScrollTop) {
        $('img').animate({right: '-=10'}, 10);
    } else {
        $('img').animate({left: '+=10'}, 10);
    }
    lastScrollTop = st;
    });

Answer 4

也许这可能会有所帮助：

https://jsfiddle.net/vq2tpavn/9/

我已根据您相对于窗口高度的滚动位置，将您原来的小提琴从左到右修改为translate。

$(window).on('scroll',function(){
    var trainPosition = Math.round($(window).scrollTop() / $(window).height() * 100);
    $('.train').css('transform','translateX('+(trainPosition-50)+'%)');

});

应用程序中存在-50以匹配您在CSS中已有的translateX(-50%)。

Answer 5

它对我有用

$(window).scroll(function() {
$('.train').animate({right: '-=50'}, 5);
});

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

5 个答案: