javascript - 使用 jQuery 和 CSS 重新创建动画

Question

我一直在为我的网站制作滚动效果，这让我发疯了，它可能甚至不值得，但我现在不能停下来。

我已经能够使用 adobe edge 和 muse 来模拟效果。谁能想出一种更简单的方法来创建这种效果？动画可以是seen here .当您滚动时，标题形状会发生变化并调整大小。我试过用 svg animate、div rotation animate 等来做这件事，但没有成功。

如有任何帮助，我们将不胜感激。

Answer 1

通常我们不会为问题提供完整的解决方案，但我有一些空闲时间，这是一个非常有趣的元素。如果我的回答对你有用，我希望你会接受。

我确信有更有效的方法可以做到这一点(例如，操作 SVG)，但我尽可能保持简洁。这是使用 CSS 和 Javascript/jQuery。我会让 javascript 部分的评论来解释。

HTML

<div id="animation">
  <div id="box"></div>
  <div id="ang"></div>
</div>

CSS

#animation {
  width: 500px;
  position: fixed;
  top: 0;
  left: 50%;
  margin-left: -250px;
}

#box {
  width: 500px;
  height: 125px;
  background: #333;
}

#ang {
  width: 0;
  height: 0;
  border-top: 175px solid #333;
  border-right: 500px solid transparent;
}

Javascript

$(window).scroll(function() {
  var pos = $(window).scrollTop(), // Current scroll position
      max = 300, // How quickly we want the animation to finish (in pixels)
      box = 50, // Collapsed height of the box
      ang = 0; // Collapsed height of the angle

  /* Only make changes if we are within the limit of our max variable
   * If this condition is not met, the box and angle will be collapsed
   * I found this necessary because scrollTop doesn't produce consistent
   * values and quite often the box wouldn't fully collapse */
  if (pos <= max) {
    // Max height - (scroll percentage x (max height - min height))
    box = 125 - (pos / max * 75);
    ang = 175 - (pos / max * 175);
  }

  // Adjust the height of the box and the angle
  $('#box').css({ 'height': box + 'px' });
  $('#ang').css({ 'border-top-width': ang + 'px' });
});

See my JS Bin for a demo.