【转】8 个效果惊人的 WebGL/JavaScript 演示

英文原文:9 IMPRESSIVE WEBGL JAVASCRIPT EFFECT SHOWCASE,翻译:iteye WebGL 是一种 3D 绘图标准,这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起,为 HTML5 Canvas 提供硬件 3D 加速渲染.WebGL 技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂 3D 结构的网站页面,甚至可以用来设计 3D 网页游戏等. 本文将为你带来 8 个效果惊人的 WebGL 效果,你可以在最…

javascript跟随滚动效果插件代码（javascript Follow Plugin）

这篇文章介绍了javascript跟随滚动效果插件代码(javascript Follow Plugin),有需要的朋友可以参考一下Js 跟随滚动效果插件支持定义多个跟随ID,采用css fixed属性,不支持ie6,兼容其他主流浏览器.支持定义滚动到底部的最小高度,不会覆盖底部页面大小resize后,插件会自动重置参数=======Js 跟随滚动效果插件1.支持定义多个跟随ID,采用css fixed属性,不支持ie6,兼容其他主流浏览器.2.支持定义滚动到底部的最小高度,不会覆盖底部3.页面…

这是html5中WebGL的演示

这是html5中WebGL的演示,让我们与他人分享爱您发送短消息.每次你进入它使用不同的位置,新的爱情点被添加到全球.让世界更明亮的地方与你的朋友分享! 源文件:部分代码:<!DOCTYPE html><html><head> <title>Geolocation love</title> <meta charset="utf-8"> <script src=&quo…

7款效果惊人的HTML5/CSS3应用

今天是周末,我为大家收集7个比较经典的HTML5/CSS3应用,每一个都提供源代码,效果非常惊人. 1.CSS3/jQuery创意盒子动画菜单作为前端开发者,各种各样的jQuery菜单见过不少,这款jQuery/CSS3菜单却是别具一格,菜单项嵌入到九宫格中,像小盒子一样,加上温馨的背景,菜单整体外观十分可爱.点击菜单项,盒子就会展开,展示该菜单项具体的内容.该CSS3菜单在展开时也有不错的动画效果. 2.HTML5视频破碎重组特效强大视觉冲击 HTML5视频播放器很多,但是HTML5视频特…

5个界面效果很炫的JavaScript UI 框架

Web 开发很简单,Web 应用的 UI 开发却很复杂,如果能够利用一些成熟的 UI 框架可以大大的减少开发的复杂度.本文向你介绍 5 款界面效果很不错的 JS 框架. 1. ExtJS ExtJS 主要用来开发RIA富客户端的AJAX应用,主要用于创建前端用户界面,与后台技术无关的前端ajax框架.因此,可以把ExtJS用在.Net. Java.Php等各种开发语言开发的应用中.ExtJs最开始基于YUI技术,由开发人员 JackSlocum开发,通过参考JavaSwing等机制来组织可视化组…

jQuery警告/确认/提示弹出对话框效果（替换传统JavaScript下的提示框）

http://www.51xuediannao.com/js/jquery/jquery_tsk/ http://www.jq22.com/demo/jqueryConfirm20160413/…

Flex Iris效果放大或缩小组件演示

Iris效果通过扩展或收缩集中在目标上的矩形遮罩为效果目标设置动画.该效果可以从目标的中心放大遮罩来显示目标,也可以向中心收缩遮罩来隐藏目标.演示: 源码如下: <?xml version="1.0"?>  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" hei…

你不知道的JavaScript演示代码Github地址

你不知道的JavaScript博文相关代码托管至Github,每次写完博客会把代码提交上去. 代码地址:https://github.com/rongbo-j/you-dont-know-js 点击Download Zip可下载源码,或者安装git版本控制工具,在控制台或终端敲两行命令可以检出代码: git init git clone https://github.com/rongbo-j/you-dont-know-js.git…

9个WebGL的演示

1. WebGL Water This incredible demo is as fluid as you could believe. Raise and drop the ball into the water to see realistic, beautiful splashing of the water. You can also just click the water to see it ripple away. I'm completely awestruck at…

JavaScript演示下Singleton设计模式

单例模式的基本结构: MyNamespace.Singleton = function() { return {}; }(); 比如: MyNamespace.Singleton = (function() { return { // Public members. publicAttribute1: true, publicAttribute2: 10, publicMethod1: function() { ... }, publicMethod2: function(args) { ...…

JavaScript演示如何访问Search字段

<!DOCTYPE html> <html> <body> <h3>演示如何访问Search字段</h3> <input type="search" id="mySearch" placeholder="搜索.."> <p>点击按钮来获得 search 字段的占位符文本.</p> <button onclick="myFunction(…

二、JavaScript语言--JS实践--倒计时效果

主要内容:分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果. Javascript 日期对象: Date()返回当前的日期和时间 getYear()返回年份,获得年最好用 getMonth()返回月份值(从0开始,+1) getDate()查看Date对象,并返回日期(1-31) getDay()返回星期几(0-6) getHours()返回小时数(0-23) getMinutes()返回分钟数(0-59) getSeconds()返…

原生javascript实现网页显示日期时钟效果

刚接触javascript中Date内置对象时,以为这些方法都太简单了,结果要自己实际操作写一个时钟效果还真一时把我难住了,主要有几点大家要注意的.先看实际效果要实现这样的效果某年某月某日星期几几时几分几秒先看代码效果 <script type="text/javascript"> window.onload=function(){ showDate(); countdown(); } function showDate(){ var myDate=new Date(…

JavaScript函数实现鼠标指向后带图片的提示效果

转载:http://www.cnblogs.com/jack86514/archive/2009/04/01/1427584.html 当我们在写一个网页程序的时候,很多方法可以提供页面的动态显示,从而提高页面的视觉效果. 本例就是通过一个简单的Javascript代码动态显示图片的信息的,其实这样的例子很多,所以这里只做简单的说明了. 现在就创建一个页面,代码如下所示: <html> <head> <meta http-equiv="Content-Type&qu…

充满想象力的 JavaScript 物理和重力实验

在这个列表中挑选了9个物理和重力实验,用来展示 Javascript 的强大.几年前,所有这些实验都必须使用 Java 或 Flash 才能做.在下面这些惊人的例子中,就个人而言,我比较喜欢仿真布料的那个,我简直不敢相信它是使用 JavaScript 做出来的. 您可能感兴趣的相关文章 Web 开发中很实用的10个效果[源码下载] 8个前沿 HTML5 & CSS3 效果[源码下载] 12款经典的白富美型 jQuery 图片轮播插件挑选12款优秀 jQuery Ajax 分页插件和教程值得收…

9个充满想象力的 JavaScript 物理和重力实验

在这个列表中挑选了9个物理和重力实验,用来展示 Javascript 的强大.几年前,所有这些实验都必须使用 Java 或 Flash 才能做.在下面这些惊人的例子中,就个人而言,我比较喜欢仿真布料的那个,我简直不敢相信它是使用 JavaScript 做出来的. Cloth 布料效果的 HTML5 Canvas 应用演示,效果逼真.你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果. 在线演示源码下载 Ball Pool Ball Poo…

精选9个值得学习的 HTML5 效果【附源码】

这里精选了一组很酷的 HTML5 效果.HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强.效果丰富的Web 应用. 超炫 HTML5 粒子效果进度条我喜欢粒子效果作品,特别是那些能够应用于实际的,例如这个由 Jack Rugile 基于 HTML5 Cavnas 编写的进度条效果.看着这么炫的 Loading 效果,即使让我多等一会也无妨:) 源码下载在线演示 HTML5 C…

8个前沿的 HTML5 & CSS3 效果【附源码下载】

作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身手.这篇文章挑选了8个前沿的 HTML5 & CSS3 效果,记得收藏哦:) 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. HTML5 模拟现实物理效果 Ball Pool 是一个基于 HTML5 技术的实验,模拟现实物理效果,让…

未来的 Web：九个不可思议的 WebGL 应用试验

WebGL 技术允许把 JavaScript 和 OpenGL ES 2.0 结合在一起,通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定,WebGL 可以为 HTML5 Canvas 元素提供硬件 3D 加速渲染,这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化.今天,本文向大家展示8个惊艳的 WebGL 应用实验. 您可能感兴趣的相关文章 2012年最经典的10款 HTML5 游戏集锦 35款非常优秀的基…

CSGrandeur的WebGL学习——WebGL教程

在线查看:http://csgrandeur.gitbooks.io/webgl-learn/content/ 离线mobi:http://files.cnblogs.com/files/CSGrandeur/csgrandeur-webgl-learn_mobi_20150520.rar 离线pdf:http://files.cnblogs.com/files/CSGrandeur/csgrandeur-webgl-learn_20150520.pdf 在线版本会及时更新,离线版本在有较大改动…

8个web前端的精美HTML5 & CSS3效果及源码下载

作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身手. 1.HTML5 模拟现实物理效果 Ball Pool 是一个基于 HTML5 技术的实验,模拟现实物理效果,让你在 Web 中感受自然物体的运动.玩法介绍:可以随意拖动圆球.点击页面背景.晃动浏览器.双击页面背景或者按住鼠标左键,有不同的效果,赶紧来体验一下. 在线演示源码下载 2.实现各种…

使用 x3dom 框架及 WebGL 在浏览器上显示 3 维模型

如果需要在浏览器上显示 3D 画面的话, 现在一般会使用 WebGL, 典型的例如 three.js(http://mrdoob.github.com/three.js/), 但是 WebGL 对浏览器版本以及显卡的要求比较高, 很多客户端无法正常使用 ———— 当然现在新买的机器是毫无压力的. 后来在网上查找到了 X3DOM(http://www.x3dom.org/), 通过使用不同的后端(backend), X3DOM 可以兼容较低版本的浏览器(主要是指 IE 系列), 也可以在没有…

WebGL自学教程——WebGL演示样本：开始

最终开始WebGL样品演示,...... 开始使用WebGL步骤,非常easy: 1. 获得WebGL的渲染环境(也叫渲染上下文). 2. 发挥你的想象力,利用<WebGL參考手冊>中的函数,參考<OpenGL ES 2.0编程指南>和各种已有的WebGL演示,针对获得的WebGL渲染环境进行操作,表达出你的意境. 为了获得WebGL的渲染环境.或者说,为了给WebGL一个渲染环境.我们须要在Web页面中定义一个名称为"canvas "的HTML5元素. 每一…

WebGL自学教程——WebGL演示样例：開始

最终開始WebGL的演示样例了,...... 開始使用WebGL的步骤,非常easy: 1. 获得WebGL的渲染环境(也叫渲染上下文). 2. 发挥你的想象力,利用<WebGL參考手冊>中的函数,參考<OpenGL ES 2.0编程指南>和各种已有的WebGL演示,针对获得的WebGL渲染环境进行操作,表达出你的意境. 为了获得WebGL的渲染环境,或者说,为了给WebGL一个渲染环境,我们须要在Web页面中定义一个名称为"canvas "的HTML5元素.…

Bootstrap进阶五：Web开发中很实用的交互效果积累

1.页面切换效果我们已经在示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果. 2.视差滚动(parallax-slider) 视差滚动(parallax-slider)已经被广泛应用于网页设计中,这种技术能够让原本平面的网页界面产生动感的立体效果. 3.侧栏动画效果以细微的过渡动画显示一些隐藏的侧边栏,其余的内容也是.通常侧边栏滑入,把其他内容推到一边.这个可过程中可以加入很多微妙而奇特的效果. 4.Slicebox - 3D 图片滑块效果使用 CSS3…

HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系

一.前面的所以然技术的发展日新月异,说不定回家钓几天鱼,就出来个新东西了.新事物新技术发展的初期,你无法预见其未来之趋势,生命诚可贵,没有必要花过多时间深入研究这些新东西,不过,知道了大概,了解个全貌还是很有必要的.虽不是时代缔造者,也不至于落后于时代发展大潮. 互联网的发展相当的神速,其他不说,就前端技术这块,出现的些新名词或生名词就让人眼花缭乱,应接不暇,比如说:HTML5 Canvas, WebGL, CSS Shaders, GLSL等.你是否有这样的疑问:这些都是些什么玩意?是喜欢打…

【WebGL】1.WebGL简介

OpenGL和WebGL基本概念 OPEN GL:一个跨编程语言.跨平台的编程接口规格的专业的图形程序接口.它用于三维图像(二维的亦可),是一个功能强大,调用方便的底层图形库. WebGL:一个3D图形标准融合了Javascript和OPEN GL ES2.0为HTML5 Canvas提供了硬件3D加速渲染Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化 OpenGL是一个底层库,他是一个和语言和平台无关图形程序接口(包括二维和三维)…

javascript开源大全

javascript开源大全 Ajax框架-jQuery 可视化HTML编辑器-CKEditor 国产jQuery-UI框架-(jUI)-DWZ 网页开发FireFox插件-Firebug 服务器端的JavaScript脚本-Node.js jQuery图表插件-jQchart HTML5-开发框架-jQuery-Mobile 跨浏览器的RIA框架-ExtJS Flash视频播放器-JW-PLAYER jQuery表单插件-jQuery.form jQuery-File-Upload 可视化HT…

精选9个值得学习的 HTML5 效果

此文转自:http://www.cnblogs.com/lhb25/p/9-html5-effects.html,仅供本人学习参考,版权归原作者所有! 精选9个值得学习的 HTML5 效果[附源码] 这里精选了一组很酷的 HTML5 效果.HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强.效果丰富的Web 应用. 超炫 HTML5 粒子效果进度条我喜欢粒子效果作品,特别是那些能够应用…

webapp应用--模拟电子书翻页效果

前言: 现在移动互联网发展火热,手机上网的用户越来越多,甚至大有超过pc访问的趋势.所以,用web程序做出仿原生效果的移动应用,也变得越来越流行了.这种程序也就是我们常说的单页应用程序,它也有一个英文缩写,叫SPA; 它最大的特点就是可以利用前端技术做出跨平台的移动应用.技术难点在于理解虚拟页面与物理页面之间的变换关系.一个偶然的机会,我由php程序员转为web前端开发,主攻javascript编程,不知不觉,已经快两年了.一直有一种想写一个webapp应用框架的冲动,但是各种原因,终究没有付出…

【【转】8 个效果惊人的 WebGL/JavaScript 演示】的更多相关文章