如何实现动画效果

How to achieve animation effects

本文关键字：动画 实现 何实现      更新时间：2023-09-26

在这个网站中，当你稍微滚动页面时，标题会动画化。您能否建议人们可以使用哪些技术、工具和最佳实践（广泛地）来实现这种效果和类似的效果？

当滚动位置位于顶部时，使用 javascript 向标头元素添加一个类（绑定到 onscroll 事件并检查是否在顶部）。然后在应用该类时为 css 中的元素定义新的帖子，并使用 transition css 属性对其进行动画处理

对于滚动时发生的动画，您将使用

$(document).scroll(function() {
 if($(document).scrollTop() === 0);
} else {
});

至于动画，有很多方法可以做到这一点，如上所述，问题太宽泛了。

我个人的做法是向滚动的正文添加一个类。然后，我相应地设置了要更改的特定元素（在您的情况下为标题）的样式。我将其添加到主体而不是特定元素中，以防我想操作其他选择器等。

这是我使用的 JS： 

jQuery(window).scroll(function() {
  var scroll = jQuery(window).scrollTop();
  if (scroll >= 50) { //distance scrolled before effect takes place
     jQuery("body").addClass("scrolled");
  } else {
     jQuery("body").removeClass("scrolled");
  }
});

然后我会添加一些 CSS，例如：

header{height:100px;transition:all, .4s, ease; /*Make sure to use all cross-browser markup*/;}
body.scrolled header{height:50px;}
相关文章：