如何在使用 CSS 和 JS 向下滚动时从左向右移动(动画)元素

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

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

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

我真的不知道如何在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%);
}

看看这个小提琴：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 中部分：

Section{
  ...
  overflow: hidden;
}

也许这会有所帮助：

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%)相匹配。

这是你的小提琴的微创版本：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">
    ...

试试这段代码

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

它对我有用

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

相关内容

最新更新

热门标签：