一秒钟把 Github 项目变成前端网站

GitHub Pages 大家可能都知道，常用的做法，是建立一个 gh-pages 的分支，通过 setting 里的设置的 GitHub Pages 模块可以自动创建该项目的网站。
这里经常遇到的痛点是，master 遇到变更，经常需要去 sync 到 gh-pages，特别是纯 web 前端项目，这样的痛点是非常地痛。
Github 官方可能嗅觉到了该痛点，出了个 master 当作网站是选项，太有用了。

如上图所见，本文就是要实现上面那种效果。
由于最近 AlloyTouch 要写一个下拉刷新的酷炫 loading 效果。所以首选大波浪进度图。
首先要封装一下大波浪图片进度组件。基本的原理是利用 Canvas 绘制矢量图和图片素材合成出波浪特效。

轮播图也涉及到触摸和触摸反馈，同时，AlloyTouch 可以把惯性运动打开或者关闭，并且设置 min 和 max 为运动区域，超出会自动回弹。
除了一般的竖向滚动，AlloyTouch 也可以支持横向滚动，甚至任何属性的运动，因为它的设计的本质就是属性无关，触摸可以反馈到任何属性的运动。所以 AlloyTouch 制作各种各样的轮播组件还是得心应手。

传送门

Github 地址：https://github.com/AlloyTeam/AlloyTouch

简介

AlloyTouch 的本质是运动一个数字，把数字的物理变化映射到你想映射的任何属性上。所以带来了广泛的应用场景。不论实在应用、游戏、操作系统等许多层面，监听用户触摸，给用户真实的运动反馈是很常见的应用场景。如王者荣耀里，旋转用户角色，抽奖程序滚动转盘、页面滚动、局部滚动等。

写在前面

记得以前 facebook 做过一款 HTML5 游戏。开场动画是一块软体类似豆腐的东西一起摇摆。类似的效果如下面的 gif 所示：

facebook 当时使用的是 createjs 下的子项目 easeljs 和 tweenjs 去制作，基于 Canvas 的动画。基本的原理主要是：循环运动 Canvas 抽象的 DisplayObject 的 skewX 和 scaleY 来实现软体摇摆。
目前来看 transformjs 也能做到，因为 transformjs 也能运动 skewX 和 scaleY。先来看看 facebook 的方式。

简介

在过去的两年，越来越多的同事、朋友和其他不认识的童鞋进行移动 web 开发的时候，都使用了 transformjs，所有必要介绍一下，让更多的人受益，提高编程效率，并享受编程乐趣。（当然 transformjs 不仅仅支持移动设备，支持 CSS3 3D Transforms 的浏览器都能正常使用 transformjs）

传送门

官方网站：http://alloyteam.github.io/AlloyTouch/transformjs/
Github 地址：https://github.com/AlloyTeam/AlloyTouch/tree/master/transformjs