当前位置: 首页 > 科技观察

我用这十八个神奇的库来美化我的项目,真是瞎了眼!

时间:2023-03-15 17:17:39 科技观察

以上代码。.........1、Lottie-Web/Bodymovingithub地址:https://github.com/airbnb/lottie-web从我最喜欢的资源库入手。使用此库,可以将在Adob??eAfterEffects中创建的动画直接导出到您的网站。例子:2.Parallax.jsgithub:https://github.com/wagerfield/parallax有了这个库,我们可以制作出漂亮的视差效果,可以通过鼠标移动来控制,还可以调整移动物体的速度。3.FlatSurfaceShader[FSS]github:https://github.com/wagerfield/flat-surface-shaderFlatSurfaceShader是一种令人惊叹的3D模拟光照效果,可以配置为使用基于Canvas的2D上下文或SVG多边形array画一个三角形。它还使用本机Float32Arrays来存储数字数据以进行高度优化的计算。您可以调整颜色参数以预览效果,并且可以导出图像。4、Hover.cssgithub:https://github.com/IanLunn/HoverHover.css是一套基于CSS3的鼠标悬停效果和动画,可以方便的应用到按钮、LOGO、图片等元素上。所有这些效果只需要一个标签,必要时使用前后伪元素。由于使用了CSS3过渡、过渡和动画,因此仅支持Chrome、Firefox和Safari等现代浏览器。5.Video.jsMarkersgithub:https://github.com/spchuang/videojs-markersVideo.js是一个常用的网页嵌入视频播放器的JS库。Video.js自动检测浏览器是否支持HTML5,如果不支持HTML5,则自动使用Flash播放器。使用此插件,您可以在您网站上存在的视频上放置必要的标记,以便您可以轻松切换到我们需要的时间码。6.MagicGridgithub:https://github.com/e-oj/Magic-Grid这个库帮助我们创建一个自适应网格,你不需要创建一个单独的@media样式。只需指定容器即可。7.Vue/ReactContentLoadergithub:https://github.com/egoist/vue-content-loaderVueContentLoader是一个基于Vue.js的SVG占位符加载,可定制的SVG组件,用于创建占位符字符加载,例如Facebook加载卡片.VueContentLoader是react-content-loader的Vue实现。8.ReactImageGallerygithub:https://github.com/xiaolin/react-image-gallery9.WebSlidesgithub:https://github.com/webslides/WebSlidesWebSlides是一个开源的HTML幻灯片项目,可以帮助那些熟悉前端语言的开发者可以快速制作出令人惊叹的幻灯片。页面中的每一个都是独立的幻灯片,需要很少的CSS代码修饰。10.SVG.jsgithub:https://github.com/svgdotjs/svg.jsSVG.js是一个轻量级的JavaScript库,可以让你轻松操作SVG和定义动画。示例地址:https://jsfiddle.net/Fuzzy/f2wbgx5a/11。ReactMotiongithub:https://github.com/chenglou/react-motionReactMotion是一个React弹性动画库,使用0-10个弹性参数进行动画处理:import{Motion,spring}from'react-motion';//Inyourrender...{value=>

{value.x}
}有什么问题这个库解决?对于95%的动画组件用例,我们不需要使用硬编码(硬编码配置)缓冲曲线和时间转换来重新排序。只需为您的UI设置刚度和阻尼系数,然后让物理的魔力来处理它。这样,您就完全不必担心中断动画之类的小问题。它还大大简化了API。示例:12.RELLAXgithub:https://github.com/dixonandmoe/relllaxrellax.js是一个轻量级的纯JavaScript滚动视差效果插件。relax.js的压缩版本只有871字节。在手机等小屏幕设备中,插件会自动限制视差功能。13.Dynamics.jsgithub:https://github.com/michaelvillar/dynamics.jsdynamics.js是一个Javascript库,可以创建基于物理的CSS动画。14.mo.jsgithub:https://github.com/mojs/mojsMo.js是一个“简洁高效”的图形动画库,拥有流畅的动画效果和惊人的用户体验,在任何设备上,屏幕密度独立效果都很好,你可以绘制内置形状或者自定义形状,只要你喜欢,你也可以绘制多个动画,然后将它们连接在一起。更多详情请访问Mo.js官网15.Reveal.jsgithub:https://github.com/hakimel/reveal.jsReveal.js制作PPT的好处是可以使用markdown语言直接写静态文本,并且可以添加html语言支持的各种交互动画,然后Pandoc直接转成PPT。缺点是在使用markdown时,对单个HTML元素的操作不够灵活。本指南将记录使用Reveal.js做PPT的一些经验和教训。为了简单起见,静态页面我们尽量使用Markdown,动画演示使用p5js。16.Animsitiongithub:https://github.com/blivesta/animsition17。SVGMesh3dgithub:https://github.com/mattdesl/svg-mesh-3d用于将SVG字符串转换为3D三角形网格的高级模块。最适合字体图标SVG等剪影。18.Zdoggithub:https://github.com/metafizzy/zdogzdog是一个圆形的、平面的、对设计者友好的伪3D引擎。通过这个库,可以创建伪3D元素,而无需了解几何或代数来创建几何图形。.作者:ChimezieEnyinnaya译者:前端小智来源:博客原文:https://dev.to/kerthin/18-amazing-github-repositories-that-will-help-you-make-a-beautiful-project-3pgo[编者按推荐】HarmonyOS官方战略合作共建——HarmonyOS技术社区任何Ubuntu用户都应该安装的四大Linux应用变废为宝MySQL的三大JOIN子句使用指南AppleiOS15再次迎来更新,除了直播文字,有五个新发现