轩枫阁

前言

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

Rough.js

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

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

前言

SPA单页面应用在切换hash的时候，往往要更改页面标题，一般是通过document.title来设置。

以上方式在Android生效，但在IOS中是无法在页面不刷新时设置浏览器title的。

Demo

微信扫一扫：http://www.xuanfengge.com/demo/201604/wx_change_title.html 查看全文

前言

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

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

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

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

动效篇

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

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

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

小宝：腾讯游戏HTML 5实战案例！在这次朋友圈广告的设计过程中，遇到了好多拦路虎，有惊喜有郁闷，但在这个过程中我收获到了很多关于设计的经验和对项目的理解。下面，我以设计师的角度来分享一下在这次朋友圈广告中的一些过程和感悟，附设计流程图哟。

前言

最近有好多好多的优秀的朋友圈广告出现在我们的眼前，得到了好多人的关注。

小宝也很期待能够做一个有意思的朋友圈广告给大家玩玩，没想到梦想成真了！

这篇有趣的文章呢，我会分3大部分来和大家讲述，请屏幕前的你耐心的听我“墨迹”呗：

1. 一个前所未有的挑战；
2. 《全民突击》朋友圈广告的设计回顾；
3. 就是很有震撼力的总结了；

接下来我就开始了呀！

一、前所未有的挑战

（空降了一个大大大需求）

听说一款3D枪击手游《全民突击》要上微信朋友圈广告了呀。项目组的同学们和我们设计师们都惊呆了，手忙脚轮的赶紧的展开筹划和讨论。

1.01项目背景

随着枪击手游的竞争越来越凶，玩家对《全民突击》的认知还是不够，需要做一次品牌的曝光宣传，让玩家对《全民突击》的认知更深入做到拉新的一个宣传效果，也借助微信朋友圈广告的渠道，打造一个《全民突击》是第一个上微信朋友圈广告的枪击游戏品类的游戏。小伙伴们都“鸡冻湿”了！

1.02需求目的

《全民突击》要在这个阶段进行一次拉新，品牌曝光，提升产品知名度，还要保持老玩家活跃度和拉回流的目的，转化新进，提升市场占有率，做一次品牌的整合传播推广，围绕整个初始想法策划了一个H5对其进行传播。 查看全文

前言

风靡营销圈的H5已经不仅仅是一个展示工具，现在几乎所有品牌都会利用H5技术制作大量视觉丰富夺目的小应用、小游戏，以期获得病毒扩散效益。甚至我最近都收到了H5的简历，应聘的小哥直接发了个二维码过来，虽然这种简单的套模版连我这种小copy都会做，但这种自我推销的创意值得点个赞！

然而，技术汪们表示，还有很多酷炫到没朋友的H5你们都还没见识到好吗！

接下来，请跟我左手右手一个慢动作，开启H5花样玩法的神奇大门！

一、H5不可替代的三！大！技！能！

1、绘图功能

其实大伙儿在很多H5中看到的动画效果就是用H5的绘图功能做的，比如前段时间我们为雀巢做的一个案例。 查看全文