github上寻找web_10个推荐的Web上的Motion GitHub Repos

github上寻找web

GitHub是找到免费发布给公众的项目的好地方,但是您是否曾经出过一个回购协议,却忘了它可能有多酷和有用? 在本文中,我将介绍GItHub上免费提供的一些出色的项目,这些项目着重于帮助动画师为Web构建运动。

1. Rellax

Rellax是一种黄油状的光滑,超轻便的视差库,它还可以在各种设备上运行。 无需编写大量代码,您就可以学习如何为项目提供流畅的滚动体验,并充分了解使视差产生的原因。

2. Dynamics.js

如果您想为自己的工作创建更多逼真的基于物理的运动,那就不要比dynamics.js更为复杂。

借助它,您可以为任何DOM元素,SVG属性和JavaScript对象CSS属性设置动画。 该库不仅将测试您的JS能力,而且还将学习物理如何使用户获得更直观和逼真的体验。

其主页上的滑块确实可以帮助您了解每个媒体资源如何与其对等对象一起创建基于物理的动作,以反映我们真实的动作。

3. Barba.js

在您的网站页面之间创建惊人,流畅和平滑的过渡。 Barba.js是一个很小的文件库(压缩后压缩为4kb),是灵活且无依赖的库,可帮助您将网站的UX提升到一个新水平。

这也是关于如何使用PJAX (推送状态AJAX)和Push State API来增强页面转换的一课。 如果您从未听说过这些技术,那么将对它们进行很好的介绍,最后,它们将为页面遍历带来非常出色的效果。

4. 灯芯

Wick是互联网的免费开放源代码多媒体创建工具包。 这是一个基于浏览器的混合动画和编码环境,用于构建Web交互性。 受到Flash(基于关键帧的动画吗?),HyperCard和Scratch之类工具的大力启发,它是为响应现代网络对此类工具的日益增长的需求而开发的。

使用浏览器作为指导来创建平滑运动,而无需下载任何其他软件即可完成工作。

5. Bounce.js

立即创建精美CSS3动画。 bouncejs.com上的工具允许您生成无需使用任何额外JavaScript即可使用的静态关键帧,但是如果您希望应用程序即时生成这些关键帧,则可以使用Bounce.js库。

关键帧输出绝对令人着迷,并且深刻理解了matrix() CSS函数和关键帧构建的使用。 这是一个很好的工具,可以真正微调特定的动作,并了解如何使用关键帧创建惊人的弹跳式动作。 在其创造者Joel Besada的著作中 ,也有一篇很棒的文章,内容涉及减少关键帧的生成量,为什么要努力争取关键帧以及如何使人着迷。

注意 :根据Joel的说法,目前Bounce不再处于积极的开发中,没有未来的计划。

6. 动漫

动漫是一个轻量级JavaScript动画库。 它可以与任何CSS属性,单个CSS转换,SVG或任何DOM属性以及JavaScript对象一起使用。

这是一个很棒的库,可以帮助您掌握如何构造和学习基于时间轴的运动,以特定值开始动画,复杂的关键帧动画,定义相对于先前动画持续时间的开始时间,构建播放控件等等。

我强烈建议您进行一次尝试 ,如果您希望更多,可以在CodePen上进行大量演示

7. 等等!动画化

我喜欢这个。 等待! Animate提供了一种简单的方法来计算关键帧百分比,以便您可以在每次动画迭代之间插入延迟。

有一个配置工具可以在不需要JavaScript的情况下向您自己的动画添加等待时间,因为CSS并没有提供一种在动画再次循环之前暂停动画的简便方法。 animation-delay只是表示动画开始时的延迟。

您甚至可以自定义时间,持续时间和运动方向,以微调所需的运动。 这是学习运动的一种非常有趣的方式,可以实时为您提供设置反馈。

8. MoJS

MoJS是“网络动态图形工具带”。 它使您可以创建柔滑流畅的动画和效果,以实现惊人的用户体验。 甚至还可以选择创建一个可满足您当前项目需求的自定义版本。 这么长的大文件开销!

9. 精神

另一个鬼魂。Spirit是网络上一流的动画工具( 可以在此处找到该应用程序 ); 使用可视时间线跳入并为对象设置动画。 我只知道这会很棒!

Spirit将改变您创建网络动画的方式。 您将获得完整的时间轴控制,检查动画的能力以及易于学习和理解的API。 这是一种理解动画的直观而简单的方法,而无需学习复杂软件的大量开销。

10. ScrollReveal

ScrollReveal使您可以轻松地为网络滚动动画。 而且它的重量也很轻; 除了具有零依赖关系之外,该库的大小为3.3KB,并且经过压缩压缩。

可以将基于间隔的序列动画配置为异步加载,以使自己的脚步潮湿。 ScrollReveal还支持开箱即用的3d旋转,这意味着您可以继续学习3D并真正发挥创意,而无需掌握底层滚动功能和机制。

离别的想法

您还有我错过的其他开放源代码存储库吗? 您是否使用了本文列出的任何项目? 在下面发表评论并链接! 我希望这些示例中的至少一个可以在您的日常工作中使用。 编码愉快!

翻译自: https://webdesign.tutsplus.com/articles/10-recommended-github-repos-for-motion-on-the-web--cms-29358

github上寻找web

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值