轩枫阁

首页 / 搜索标签: HTML5

piano-play 基于html5的钢琴导航弹奏游戏

前言

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

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

体验

查看全文

2016/12 11  周日

玩转HTML5移动页面

前言

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

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

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

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

动效篇

20150427180532134

(1) CSS3时序错开渐显动画

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

例子(忽略兼容前缀和无关属性): 查看全文

2016/02 20  周六

H5离线存储三——实时程序加载进度

前言

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

Stackedit

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

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

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

2015/06 27  周六

移动前端HTML5性能优化指南

概述

  1. PC优化手段在Mobile侧同样适用
  2. 在Mobile侧我们提出三秒种渲染完成首屏指标
  3. 基于第二点,首屏加载3秒完成或使用Loading
  4. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB
  5. Mobile侧因手机配置原因,除加载外渲染速度也是优化重点
  6. 基于第五点,要合理处理代码减少渲染损耗
  7. 基于第二、第五点,所有影响首屏加载和渲染的代码应在处理逻辑中后置
  8. 加载完成后用户交互使用时也需注意性能

查看全文

2015/03 07  周六

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]