向下滚动Angular时,将元素设置到页面中

时间:2014-11-18 15:45:15

标签: html css angularjs twitter-bootstrap twitter-bootstrap-3

我们正在使用带有Bootstrap的Angular.js,项目中没有jQuery。

我想在向上和向下滚动时使用animate.css淡入屏幕上的元素。

我找到了以下示例,它准确地说明了我需要实现的目标:

http://wrapbootstrap.com/preview/WB01649B4

我如何使用Angular和animate.css执行此操作,是否有任何关于此的教程或任何帮助都会很棒。

谢谢

2 个答案:

答案 0 :(得分:1)

动画本身只能用animate.css完成。如果你想在向下滚动时触发它,你将需要javascript或jQuery让浏览器知道何时触发事件。

用于此目的的非常简单的库是jquery-waypoint。当你到达浏览器中的某个点时,它只是给你一个jquery钩子。您可以使用该钩子来启动动画。 http://imakewebthings.com/jquery-waypoints/

该网站上有几个例子,还有一些很好的文档。如果您不想专门为此使用库,那么有一些不错的教程可以在没有插件的情况下完成。

编辑:一个关于创建自己的博客文章的好文章,没有额外的插入:http://blog.templatemonster.com/2014/07/07/webpage-scrolling-animation-effects-css3-jquery/

答案 1 :(得分:0)

我相信你看起来是什么WOW js,一个设计用于在滚动到元素时触发动画的库,是Jquery和Non Jquery版本,它与Animate CSS很好用你可以延迟触发器如果你需要它为元素

更多信息和下载: WOW JS WebSite