HTML5在线教程和技术博客

  • jQuery Ribbles - 基于WebGL的水面涟漪动效插件

    使用jQuery>Ribbles插件可以很容易的为背景图片引入水珠掉落水面时所产生的涟漪动画特效。首先引入jQuery脚本和jQuery Ribbles插件脚本:&script>src="/libs/jquery/jquery.min.js" &script>src="/libs/jquery/jquery.ripples.js" >>>>resolution:>512,>> >>>>dropRadius:>20,>> >>>>perturbance:>...

    阅读全文 收藏 评论 (0) 阅读 (7591) 2016-05-18 18:58:17  
  • Canvas实例教程:图像移动、大小调整和裁剪

    本文介绍如何使用JavaScript和HTML5 Canvas元素来移动、调整大小和裁剪图像,这些技术适用于图片编辑器、照片分享等应用场景。一般而言图像的剪裁会放在服务端进行,但是图片传送会消耗较多的流量。借助HTML5 Ca...

    阅读全文 收藏 评论 (1) 阅读 (8283) 2016-05-18 18:45:14  
  • D3.js读取外部json数据

    D3.js是一个很好的数据可视化工具,支持从web服务读取json数据,或者从外部文件如.json, .csv文件中直接读取。由于部分服务比如flickrs上的图文数据服务需要VPN才能访问,为此可以先把该服务提供的数据以json文件的格式存储在本地服务器上。代码调用示例如下:d3.json("http://wow.techbrood.com/uploads/141102/propo...

    阅读全文 收藏 评论 (2) 阅读 (8686) 2016-05-18 18:39:23  
  • Three.js 开发基础知识 - 绘制3D对象

    Three.js是一个用来简化WebGL开发的JavaScript库,比如绘制一个三维立方体,使用WebGL需要100多行,那Three.js只要10几行就能够完成。本文通过创建一个立方体来简单介绍Three.js的基础知识。Three.js中的基本概念Three.js包含3个基本概念:场景(Scene)、相机(Camera)和渲染器(Renderer)。场景就是需要绘制的对象,相...

    阅读全文 收藏 评论 (0) 阅读 (7923) 2016-05-18 18:34:29  
  • Three.js 3D打印数据模型文件(.STL)加载

    3D打印是当下和未来10年产品技术主流方向之一,影响深远。对于电子商务类的3D打印网站,一个主要功能是把商品以3D的方式呈现出来,也就是3D数据可视化技术。HTML5(WebGL)可以用来构建3D视图、立体动画、人机交互。Three.js是一个主流的JS框架用来支持和简化WebGL编程。本例是一个简单的Three.js应用,即把一个外部可用于...

    阅读全文 收藏 评论 (1) 阅读 (9629) 2016-05-18 18:28:04  
  • inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移

    在表单修改界面中常会使用一个标签、一个内容加一个修改按钮来组成单行界面,如图1所示。那么在表单总长度受限的情况下,当中间的邮箱名称过长时,会遮盖到旁边的按钮。我们可以把中间邮箱设定最大宽度,然后对于长度超出部分设置overflow: hidden来解决这个问题。但是这可能会引发另一个经典的 baseline 对齐问题,也就是...

    阅读全文 收藏 评论 (0) 阅读 (6930) 2016-05-18 18:13:58  
  • 如何使用CSS3实现一个平滑的3D文本标题

    要实现3D文本,基本上有3种方法:1. 使用CSS3的投影滤镜(filter: drop-shadow)2. 使用3d建模和CSS3 3d变换来实现(最真实)3. 使用CSS3 text-shadow属性来实现(最简单,可复制,现代浏览器都支持)本例简单说明使用text-shadow属性来实现3D文本的原理和方法。这依赖于text-shadow属性的两个特性:其1是该属性可以给文本...

    阅读全文 收藏 评论 (0) 阅读 (6262) 2016-05-18 18:03:12  
  • Processing.js和P5.js的功能简介和区别

    什么是ProcessingProcessing是关于数字艺术的编程语言,支持跨平台,语言本身是一个类Java语言,程序文件的后缀为.pde。
    什么是Processing.js为了能让Processing的代码能在Web上工作,John Resig开发了Processing.js,该JS开发库用来完成两个方面的任务:能把Processing语言动态转换成JS,从而在Web环境中执行;

    阅读全文 收藏 评论 (1) 阅读 (8863) 2016-05-18 13:05:24  
  • 如何使用CSS3实现一个3D商品标签

    使用3D缎带形状的标签是常见的一个设计模式,用在商品折扣、文章标题或网站推荐信息上,来突出显示重点内容,吸引用户视觉焦点。实现的方法有2种,一种是使用背景图片,一种是使用三角形的CSS3伪元素。本文介绍第2种方法,使用一个最简化的实例来讲解如何实现这个效果:上面的界面是一张简化的商品卡片,包含标签和商品描述...

    阅读全文 收藏 评论 (0) 阅读 (6470) 2016-05-15 12:50:47  
  • 使用requestAnimationFrame和Canvas给按钮添加绕边动画

    要给按钮添加酷炫的绕边动画,可以使用Canvas来实现。基本的思路是创建一个和按钮大小相同的Canvas元素,内置在按钮元素中。然后在Canvas上实现边线环绕的动画。requestAnimationFrame接口我们使用requestAnimationFrame接口来实现动画帧的绘制,该接口告诉浏览器在重画(repaint)之前先执行一个动画回调函数。通过这样的...

    阅读全文 收藏 评论 (0) 阅读 (6856) 2016-05-14 22:51:02