轩枫阁

前言

推荐一个基于Canvas的手绘风格图形JS库。

Rough.js

Rough.js 是一个轻量的（大约8k），基于Canvas的可以绘制出粗略的手绘风格库。

提供绘制线条、曲线、弧线、多边形、圆形和椭圆的基础能力，同时支持绘制SVG路径。 查看全文

前言

相信很多人对轩枫阁的导航交互会印象深刻，可以通过键盘，自定义节奏，弹奏出动听的曲子，是一种指尖上的艺术。

目前已经将主要代码抽出成组件，可以自定义开发。

体验

• demo预览：http://www.xuanfengge.com/demo/201612/piano/html/index.html
• 钢琴节奏：http://www.xuanfengge.com/piano

查看全文

前言

作为一名前端，在拿到设计稿时你有两种选择：

1. 快速输出静态页面
2. 加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来

作为一个有志向的前端，当然是选2啦！可是需求时间又很短很短，怎么办呢？

这次就来谈谈一些动画设计的小技巧，能在你时间不多又没有动画想法的时候瞬间让页面增色不少。
同时也会谈及移动端H5页面的优化细节与关键点，因此本文章将分为动效篇和优化篇。

动效篇

（1） CSS3时序错开渐显动画

这是一种比较常用的动画，它的优点是节奏感强，做法就是先让每个元素隐藏，然后当页面呈现后每个元素错开时间出现。

例子（忽略兼容前缀和无关属性）： 查看全文

前言

本文介绍H5离线存储的应用点——利用应用程序存储实现进度加载提示。

Stackedit

上文中提到stackedit这个编辑器也运用了离线存储，以下是程序所需要加载的文件。

Chrome插件安装：https://chrome.google.com/webstore/detail/stackedit/iiooodelglhkcpgbajoejffhijaclcdg

直接访问：https://stackedit.io/editor 查看全文

前言

本文介绍移动端重构的基础内容，主要包括基本模板、viewport、桌面图标、各种meta属性、QQ浏览器及UC浏览器私有meta。

基础篇

基本模板

查看全文