Question

在此website中，当您稍微滚动页面时，标题会动画显示。您能否告诉我们（广泛地）可以使用哪些技术，工具和最佳实践来实现这一目标和类似的效果？

Answer 1

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

Answer 2

滚动时出现的动画可以使用

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

} else {

});

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

Answer 3

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

这是我使用的JS：

<?php
$args = array(
    'post_type' => ‘foo’
);
$foo = new WP_Query( $args );

if( $foo->have_posts() ) {

    while( $foo->have_posts() ) { $foo->the_post();

        the_content();                    

    } wp_reset_postdata();
}
else {
  // SOME MESSAGE
}
?>

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

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

如何实现动画效果

3 个答案: