开源 Web 技术示例 编辑

Mozilla 支持各种令人兴奋的开源 Web 技术,我们鼓励大家使用它们。此页面提供了有关这些技术的一些有趣演示链接。

如果你知道开源 Web 技术的优秀演示或者应用,就在这里（以及 英文页面）添加一个合适的链接吧。

2D 图形

Canvas

• Blob Sallad: an interactive blob using JavaScript and canvas（示例）
• Flying through space
• 3D RayCaster
• processing.js
• 3D on 2D Canvas
• miniPaint: Image editor（源码）
• Zen Photon Garden（源码）

SVG

• Bubblemenu （视觉特效与交互）
• HTML transformations（使用了 <foreignObject> 元素）（视觉特效与变换）
• Phonetics Guide（可交互）
• 3D objects demo（可交互）
• Blobular（可交互）
• Video embedded in SVG（或下载到本地）
• Summer HTML image map creator（源码）

视频

• Video 3D Animation "mozilla constantly evolving" 
• Video 3D animation "Floating Dance" 
• Streaming Anime, Movie Trailer and Interview
• Billy's Browser Firefox Flick
• Virtual Barber Shop
• Transformers Movie Trailer
• A Scanner Darkly Movie Trailer（自带控制功能）
• Events firing and volume control
• Dragable and sizable videos

3D 图像

WebGL

• Web Audio Fireworks
• IoQuake3（源码）
• Escher puzzle（源码）
• Kai 'Opua（源码）

虚拟现实（VR）

• The Polar Sea（源码）
• Sechelt fly-through（源码）

CSS

• CSS Zen Garden
• CSS floating logo "mozilla"
• Paperfold
• CSS Blockout
• Rubik's cube
• Pure CSS Slides
• Planetarium（源码）
• Loader with blend modes
• Text reveal with clip-path
• Ambient shadow with custom properties
• Luminiscent vial

旧项目：

• CSS floating logo "Mozilla" developed by Rober Villar, from Software RVG. (debug模式)
• Bootstrap Contact Form Design
• CSS Paralax Forest
• Responsive Login Page Design
• One Page Scroll Website Template

变换

• Impress.js (源码)

游戏

• IoQuake3（源码）
• Kai 'Opua（源码）

Web API

通知 API

• HTML5 Notifications（源码）

网络音频 API

• Web Audio Fireworks
• oscope.js - JavaScript oscilloscope
• HTML5 Web Audio Showcase（源码）
• HTML5 Audio Visualizer（源码）
• Graphical Filter Editor and Visualizer（源码）

文件 API

• Slide My Text - presentation from plain text files

其他

• Web Worker Fractals
• Photo editor
• Coral generator
• Raytracer
• HotCold Touch Typing