使用jQuery和CSS重新创建动画

Recreating an animation using jQuery and CSS

本文关键字：创建 动画 新创建 jQuery CSS 使用      更新时间：2023-09-26

我一直在为我的网站做一个滚动效果，这让我很抓狂，甚至可能不值得，但我现在不能停下来。

我已经能够使用adobe edge和muse来模拟效果。有人能想出一种更简单的方法来创造这种效果吗?动画可以在这里看到。滚动时，页眉形状会改变并调整大小。我试过这样做与svg动画，div旋转动画等没有运气。

任何帮助都会很感激。

通常我们不提供完整的问题解决方案，但我有一些空闲时间，这是一个相当有趣的项目。如果我的答案对你有用，我希望你能接受。

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

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

相关文章：