html5

《每周一点canvas动画》——从2D到3D

前面的章节我们介绍了2D层面的canvas动画,基本上如果你对原理和概念都理解了,一般的2D层面的动画对你来说都是小菜一碟。从这一章开始我们介绍如何使用2D的canvas来渲染3D系统。1.CSS3与webGL提到3D效果,你可能首先会想到css3中的3D动画。通过它,单个元素或是整个页面都可以通过动画,图片滤镜,以及2D或3D的变换变得生动起来。使用它来构建3D效果,一个

H5打造3d场景不完全攻略(一): H5 3d表现形式

前言日前,taobao造物节H5放肆地火了一把。相信接下来将3d嵌入网站的这种营销方式会被越来越多的人留意到。工作之余体验了若干个3d H5页面,感觉这类的H5互动体验性明显要比普通的要强,把二维的物体转化成三维,能给人一种置身其中的感觉。所以,一个好的idea加上低成本的技术实现——将3d融入H5今后也许还会爆发出更大的能量。3D在H5中的表现形式话不多说,直接贴几个链接

原型制作 | 我用HTML5工具,做了一个支付宝9.9版的原型

最近支付宝进行了一次比较大的版本更新,引起了很多人的关注,无论从视觉还是交互体验上都有了很大的改变,但是从原型制作来说,其实比之前更加简单了。通过临摹这些知名厂商的产品,是快速进步的一种方式,可以更好的借鉴他们的交互与逻辑,比体验观看,更能深刻的理解,从而更好的改进自己的产品。说到原型,很多人就会想到Axure,这类常用的原型工具,他们使用的都是HTML规范,动效以及交互大

从想法到落地,原型演示的五个口诀

本篇文章主要面向那些入行半年左右,看似已成熟但工作起来却有点手忙脚乱的新晋产品经理。本文总字数1600,图片8张,阅览消化时间5分钟。口诀一:眼观六路,常观察学会常观摩其他竞品的产品流程、结构框架、布局排版、交互设计等要素,汲取可借鉴的地方同时思考哪些地方不人性化自己在制定的时候该如何避免,做做小笔记。在这个观摩借鉴的过程,还需要时刻清楚你自家的产品形态到底为何物,以上的内

一个成功的 H5,要击中用户要害,达到运营目的

我们都在竭尽心力想做出一个成功的H5作品。1. 什么是H5暂先不说“成功”如何定义,你能告诉我什么是H5吗?我们都知道,H5是HTML5的缩写。但HTML5只是一个页面实现方式的技术名词,难道我们平日所指的就是这个技术名词吗?显然不是。准确的说,我们所说的是 以Html5方式实现的在移动端展示的功能页面。 如果把页面比作人,那么HTML是他的骨架,CSS是他的肌肉皮肤,Ja

一个成功的 H5,要击中用户要害,达到运营目的

我们都在竭尽心力想做出一个成功的H5作品。1. 什么是H5暂先不说“成功”如何定义,你能告诉我什么是H5吗?我们都知道,H5是HTML5的缩写。但HTML5只是一个页面实现方式的技术名词,难道我们平日所指的就是这个技术名词吗?显然不是。准确的说,我们所说的是 以Html5方式实现的在移动端展示的功能页面。 如果把页面比作人,那么HTML是他的骨架,CSS是他的肌肉皮肤,J

【二次元的CSS】—— 用 DIV + LESS 做一个小黄人构造器

用 DIV + CSS3 画小黄人仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各个细节的形状,当然也不会使用任何图片哦。那就没意思了。[br]有的同学说,用canvas不是能画得更逼真而且更简单吗?这点我也非常赞同,但我的理由还是,那就没意思了。这次用到了一些LESS的特性,通过设置一些指定的参数来生成不同种类、不同身材的小黄人。GitH

Web存储之LocalStorage初探

Web存储之LocalStorage初探HTML5的发布和定稿为前端界带来巨大的变化,新增的API和特性给业务带来了更多可能性,让用户体验拥有了更可能的丰富。· HTML Geolocation 可以定位到用户的地理位置· HTML Drag and Drop 拖拽API,可以实现更简单有效的交互方式· HTML Local Storage 本地存储方案, 配合离线缓存