Question

我正在尝试为两个div设置动画，以便在滚动时滑入和滑出屏幕。向下滚动，它们向外移动，直到看不见为止。向上滚动，它们会滑回视图，并停在CSS中指定的原始位置（我已使用关键帧在页面加载时实现此目的）。问题是，一旦激活滚动运动，div就会从其原始位置跳出大约500像素-即，左侧div将跳到右侧，然后它将移到原始指定的CSS位置从该位置开始并移出屏幕。就目前而言，我仅以左元素为例设置行为。

不幸的是，我无法在Codepen中实现任何滚动行为，并且我不想在存在错误的情况下将其实时推送到我的网站。无论如何，这是带有链接的代码。欢迎和赞赏对问题措辞的任何建议以及对问题的解决方案。

以下是该问题的视频。 -- https://www.youtube.com/watch?v=G2dAX2fPPN4&feature=youtu.be

https://codepen.io/anon/pen/axpMwZ

$(document).ready(function() {
  var $horizontal = $('.about-left');

  $(window).scroll(function() {
    var s = $(this).scrollTop(),
      d = $(document).height(),
      c = $(this).height();

    scrollPercent = (s / (d - c) * 18);

    var position = (scrollPercent * ($(document).width() - $horizontal.width()));

    $horizontal.css({
      'right': position
    });
  });
});

.main {
  height: 300vh; // maximized to illustrate scroll
  width: auto;
}

.about-left {
  position: absolute;
  top: 22%;
  left: 18%;
  font-size: 300px;
  color: #15ad93;
  text-shadow: 0px 1px 3px black;
  animation: 1s ease-out 0s 1 slideInFromLeft;
}

.about-right {
  position: absolute;
  top: 22%;
  right: 18%;
  font-size: 300px;
  color: #15ad93;
  text-shadow: 0px 1px 3px black;
  animation: 1s ease-out 0s 1 slideInFromRight;
}

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-200%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInFromRight {
  0% {
    transform: translateX(200%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

Answer 1

为什么您的Codepen不显示滚动

1）绝对定位需要具有relative位置的父元素。在简化此问题和Codepen的代码的同时，您的.main div可能丢失了该代码。我把它加回来了。

2）当仍然无法正常工作时，我检查了开发控制台，发现关于<script>标签的错误。您的Codepen包含在JS面板中，那些不是必需的，实际上会导致问题。我删除了它们。

为什么动画要跳跃

简而言之-这只是一个数学问题。您的.about-left样式从left: 18%;开始。在使用right: <something>被内联样式覆盖的滚动上，其中<something>随着滚动位置而变化。该<something>的第一个值与初始left: 18%;的位置完全不同，因此，动臂元素会在屏幕上跳跃。我没有想过您的滚动数学的细节来弄清楚为什么，因为有一个更简单的解决方法。

最简单的选择是在开始时和滚动时使用一致的定位机制。对于初始位置，left: 18%;可以表示为：

right: calc(82% - 200px);

仅使用82％将包含元素的框的 right 侧放置在页面右侧的82％处，但实际上我们希望 left 侧盒子的宽度，所以我们必须减去盒子的宽度。在您的Codepen中，该像素为200像素，尽管这可能取决于您的最终样式，并且在实际代码中可能有所不同（例如，您的视频显示的是一个漂亮的花括号，而不是Codepen中的正方形）。您必须根据需要进行调整。

接下来，我更新了您的JS滚动代码，以从相同的初始位置开始更改位置：

$horizontal.css({
    'right': 'calc(82% - 200px + ' + position + 'px)'
});

只要您的position的第一个值相对较小，则第一步距起点仅一小段距离。

请注意，您必须在calc()周围加上引号，并取消对position JS变量的引用。

Updated, working Codepen。动画非常快，我的意思是它可以快速移出屏幕并跳得很大，尽管您当然可以通过调整数学来调整增量值（在控制台中查看记录的位置值）。

Answer 2

您的CSS：

.about-left {
  ...
  left: 18%;
  ...
}

您的js：

$horizontal.css({
    'right': position
});

尝试在“左”或“右”中同时使用。

或添加到.about-left类“ text-align：right;”

防止div在滚动动画上“跳跃”

2 个答案:

为什么您的Codepen不显示滚动

为什么动画要跳跃