2017年超棒前端相关工具类库大荟萃-阿里云开发者社区

开发者社区> 茶花盛开> 正文

2017年超棒前端相关工具类库大荟萃

简介:
+关注继续查看

又到了新的一年,在过去的2017年,我相信大家都在工作和开发中遇到了很多有趣的前端代码工具或者是类库, 希望在来到的2018年, 我们依然能够找到更多有用的辅助前端工具及其类库。

在这篇文章中,我将介绍一组个人觉得非常实用并且有益的工具和类库,希望对大家的工作也可以有比较大的帮助。

作为一个javascript的动画类库来说, 并没有什么非常有新鲜感的地方, 但是它最大的特色在于:性能突出。 在现在的web动画中, 我们无法避免的会遇到性能上的问题, 我们必须去应对和解决移动设备或者连接缓慢的问题

59420004325cc2e3e4eb

请点击此处输入图片描述

访问以上网站,你可以看到一系列的复杂动画效果,  但动画效果流畅并且没有卡顿, 不信的话,大家可以尝试一下, 另外两个加分点:

  • 非常专业的API

  • 非常好的callback系统设计

  • 如果你想学习前端可以来这个Q群,首先是291,中间是851,最后是189,里面可以学习和交流,也有资料可以下载。

使用非常简单,如下:

var el = document.querySelector(".box");

var tween = KUTE.fromTo(

el,

{ translateX: 0, rotateX: 0 },

{ translateX: 100, rotateX: 25 },

{ perspective: 100, duration: 2000 }

);

tween.start();

演示地址

ScrollDir

scrolldir是一个非常简单,迷你和创意十足的js工具,可以帮助你做一些相关滚动检测的功能

59420004325a3e593627

请点击此处输入图片描述

使用这个迷你的js,你不需要使用javascript,只需要使用css即可控制页面布局,代码如下:

[data-scrolldir="down"] .header-banner {top: -100px;}[data-scrolldir="up"] .footer-banner {bottom: -100px;}

在线演示

CodeSandBox

越来越多的公司开始使用vue和react来开发web应用, 因此出现了很多不同的IDE, 用来帮助开发人员使用特定类库或者框架来开发web相关应用,CodesandBox就是其中的一个, 它可以用来开发react,vue,preact和Svelte

codesandbox的一个非常不错的特性就是添加npm包到左边的边栏, 叫依赖关系。 这里有个添加包,允许你搜索相关的包

593f000428a63683e804

请点击此处输入图片描述

如果你的应用缺少了依赖, 这个工具也会提示出错,并且提示添加新的包

更多功能,大家可以看看工具主站,工具不错,大家可以体验一下

AmplitudeJS

这是一个不依赖任何类库的现代HTML5音频播放器。相信很多音乐制作爱好者会非常欣赏这个web应用

593e00023f5b9c958ac6

请点击此处输入图片描述

这个播放器允许你创建自定义设计和布局, 这有个例子:

Amplitude.init({
  songs:[{
      name:"Song Name One",
      artist:"Artist Name",
      album:"Album Name",
      url:"/path/to/song.mp3",
      cover_art_url:"/path/to/artwork.jpg"},{
      name:"Song Name Two",
      artist:"Artist Name Two",
      album:"Album Name Two",
      url:"/path/to/song.mp3",
      cover_art_url:"/path/to/artwork.jpg"},{
       name:"Song Name Three",
      artist:"Artist Name Three",
      album:"Album Name Three",
      url:"/path/to/song.mp3",
      cover_art_url:"/path/to/artwork.jpg"}]});
在线演示

更多超棒的类库

BunnyJS 

一个基于ES6的前端框架, 广告词儿如下:

如jQuery般简单, 比jQuery UI更优越, 和React一样强大

Keyframe-tool

一个将CSS动画转化成keyframe对象的命令行工具, 以便适用于web animation API

svgi

一个命令行工具,可以用来检查SVG文件内容, 提供svg文件相关信息,例如, 节点数量, 路径, 容器,形状, 树状层次等等


以上就是我们收集的一些超棒的类库,希望大家能够喜欢。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Vue 集成腾讯地图基础api Demo集合(基础地图引入与展示模块,地址逆解析,3D/2D切换 ,位置服务,mark标记)
Vue 集成腾讯地图基础api Demo集合(基础地图引入与展示模块,地址逆解析,3D/2D切换 ,位置服务,mark标记)
7 0
Vue 仿钉钉流程图(流程节点绘制 vue+Ant【如果用其他UI库需要替换几个组件】 附 demo)
# [这里是git地址](https://gitee.com/xiaoyaoluntian/imitating-dingding-flow-chart/tree/comdemo/)
6 0
数据类型-数值和字符串 | 学习笔记
快速学习数据类型-数值和字符串。
5 0
作用域及作用域链 | 学习笔记
快速学习作用域及作用域链。
5 0
阿里巴巴数据库分库分表的实践(6)
阿里巴巴数据库分库分表的实践(6)
9 0
代码注释 | 学习笔记
快速学习代码注释。
9 0
求数组元素的和 | 学习笔记
快速学习求数组元素的和。
6 0
我的历程分享
简述我的学习生涯
15 0
函数的返回值 | 学习笔记
快速学习函数的返回值。
6 0
函数当作参数2 | 学习笔记
快速学习函数当作参数2。
6 0
+关注
茶花盛开
web前端新手群291851189
218
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载