如何实现动画效果

在此website中，当您滚动页面时，页眉会呈现动画效果。您能否请告知您可以使用哪些技术，工具和最佳实践（广泛地）来实现此类效果？如何实现动画效果

来源

2016-03-15 Kamran

有太多可能的答案，或者对于这种格式太好的答案太长。请添加详细信息以缩小答案集或隔离几个段落中可以回答的问题。 [问] – CollinD

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

来源

2016-03-15 17:55:18 Mike

谢谢。我会去学习转换 – Kamran

好为动画发生滚动时，你会用

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

} else { 

});

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

来源

2016-03-15 17:56:15 Shniper

谢谢。我只想得到一些我可以研究的方向。看起来很难创造像这样的水平 – Kamran

这并不难，但动画非常耗时 – Shniper

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

这是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;}

来源

2016-03-15 19:23:11

如何实现动画效果

回答

相关问题