2018年01月聚合文章--2017年超棒前端相关工具类库大荟萃

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

在这篇文章中，我将介绍一组个人觉得非常实用并且有益的工具和类库，希望对大家的工作也可以有比较大的帮助，当然，如果你也有自己收集的类库或者前端工具，请不吝赐教，给我留言哈~

KUTE.js

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

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

非常专业的API
非常好的callback系统设计

使用非常简单，如下：

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工具，可以帮助你做一些相关滚动检测的功能

使用这个迷你的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包到左边的边栏，叫依赖关系。这里有个添加包，允许你搜索相关的包

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

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

AmplitudeJS

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

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

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"
    }
  ]
});

在线演示

[聚合文章] 2017年超棒前端相关工具类库大荟萃

KUTE.js

ScrollDir

CodeSandBox

AmplitudeJS

更多超棒的类库

BunnyJS

Keyframe-tool

svgi