www.512.net11个令人侧目的HTML5和JavaScript效果

www.512.net 47

10个令人惊叹的HTML5和JavaScript效果

2011/06/30 · HTML5,
JavaScript · 1
评论 ·
HTML5,
Javascript

作为下一代网页语言,HTML5 拥有很多让人期待已久的新特性。如今,很多 Web
开发人员开始使用 HTML5 来制作各种丰富的 Web
应用。本文向大家展示10个让人眼花缭乱的 HTML5 和 JavaScript
效果,让你体验下一代 Web 技术的魅力,相信你看完这些例子后会对未来的 Web
发展充满无限期待。

Breathing
Galaxies

www.512.net 1

动态变换颜色和直径,可通过键盘或者鼠标产生新的形状,这个效果很炫很炫!

FlowerPower

www.512.net 2

灵感来自大自然的使用,使用花朵作为画刷,以贝兹曲线方式绘图。

Noise
Field

www.512.net 3

移动鼠标可改变粒子的运动,点击可随机生成不同的粒子效果。

Keylight

www.512.net 4

双击生成两个以后的键即可发出声音,移动键的位置可产生不同的声音效果。

Swirling Tentacles

www.512.net 5

三维脉冲效果,沿着脉冲线有运动的颜色渐变模块。

www.512.net,Blob

www.512.net 6

拖动水滴有重力效果,双击可以分离,小水滴碰到大水滴会合并。

Rotating
Spiral

www.512.net 7

旋转的螺旋效果,看得有点头晕,单击可以控制开始和停止旋转。
Magnetic

www.512.net 8

模拟磁性粒子流效果,非常逼真。
Trail

www.512.net 9

彩色颗粒跟随鼠标运动效果,带尾巴淡出效果。
Graph Layout

www.512.net 10

一种交互的力向图布局效果。

原文:queness
译文:梦想天空

 

赞 2 收藏 1
评论

www.512.net 11

今天,本文与大家分享其中9个很棒的例子,为了有更好的效果,建议在Chrome浏览器中浏览。

下面我们就看看这8个站点。

那些令人惊叹的 HTML、CSS、JavaScript 工具和库

2017/05/09 · 基础技术 ·
工具,

原文出处:
oschina   

前端开发很奇妙:
它入门很简单,但是想要成为大牛却很难。有太多的事情需要考虑,到处都有需要微调的地方,太多的细节处理才能保证让一切都刚刚好。幸运的是,开发者和设计师一直致力于为我们提供有用的工具和资源,来提高我们的技能、让我们做的更好。

所以今天我收集一系列省时的、有用的 HTML、CSS 和 JavaScript
资源给大家。我希望这些工具将帮助您提高专业技能以及工作流程。

www.512.net 12

  1. Untangle
  1. We are fixel

HTML 和 CSS 工具

  • Initializr
    此工具创建一个基于 HTML5 Boilerplate 的可自定义模板。 在 JavaScript
    和 jQuery
    之间进行选择,决定是否要样本内容,并指定兼容性和服务器配置需求。
    您将获得一个拥有 Boilerplate 主要功能的模板,以开始您的项目。

www.512.net 13

  • Layer Styles
    一个非常简单的工具,以直观的方式来创建 CSS
    ——非常像一个图形编辑器。该工具允许您添加阴影、内阴影、背景、边界和圆角和生成跨浏览器的
    CSS 代码。

www.512.net 14

  • Mobile Boilerplate
    一个能够创建丰富的和高性能的移动 Web
    应用程序模板。它可以保证各种浏览器的兼容性,不仅能兼容各种高端智能机,也能兼容旧版的黑莓、塞班、以及微软的移动平台。

www.512.net 15

  • Vogue
    该工具在所有浏览器中重新加载页面的样式表(而不是 HTML
    ),甚至可以配置为在多个浏览器中同时自动重新加载页面。
    该工具不托管您的网站,而是运行您的网站本身的本地服务器。
    要使用它,只需安装 NodeJS 和 npm 。

www.512.net 16

  • css-x-fire
    此工具允许从 Firebug CSS 编辑器编辑 IDE 中的 CSS
    属性,并允许开发人员专注于 CSS 样式,而无需刷新浏览器。

www.512.net 17

  • Ffffallback
    一个可以让您测试不同字体栈以找到最佳结果的书签。它扫描页面的 CSS
    并创建一个克隆页面,您可以在其中测试和分析不同的 fallback 字体。

www.512.net 18

  • CodeKit for Mac OS X
    CodeKit
    可以帮助您更快更好地构建网站。每次保存时,都会自动编译一切:Process
    Less、Sass、Stylus、Jade、Haml、Slim、CoffeeScript、Javascript 和
    Compass 文件。轻松设置每种语言的选项。

www.512.net 19

  • Less-Boilerplate
    以 Less 形式编写的 Boilerplate CSS,包括 CSS 重置、CSS3
    帮助器,中心列块等等。

www.512.net 20

  • Needle
    v0.1a1

    Needle
    是一个方便的工具,您可以通过截取网站的部分内容并与其他屏幕截图进行比较来测试
    CSS 是否正确呈现。它还提供测试计算 CSS 值和 HTML 元素位置的工具。

www.512.net 21

  • Spritemapper
    该应用程序将多个图像合并为一个,并为相应的切片生成 CSS 定位;
    通过减少图像的数量和更好地利用连接,CSS spritemapping
    可以减少您的网站的加载时间。

www.512.net 22

  • Normalize.css
    Normalize.css 对 CSS 重置采取了稍微不同的方法。Jonathan Neal 和
    Nicolas Gallagher
    并没有消除所有的浏览器默认值,而是花时间研究不同的浏览器如何处理不同的代码段,然后保留那些有用的默认值。它节省了您作为设计师的时间,同时也提供一致的结果。

www.512.net 23

  • Zen Coding
    Zen Coding
    是一个高速编码和编辑的编辑器插件。这个插件的核心是一个强大的缩写引擎,它允许您将表达式(类似于
    CSS 选择器)扩展为 HTML 代码。

www.512.net 24

  • CSS Stress Testing and Performance
    Profiling

    Andy Edinborough 几乎能在所有浏览器中运行它所谓的“ CSS
    压力测试”代码。

www.512.net 25

  • PCSS
    一个 PHP 驱动的 CSS 预处理器,可以帮助您以更少的代码释放 CSS3
    的功能,如类嵌套、服务器端浏览器细节、默认单位和变量。该工具需要
    PHP5。

www.512.net 26

js.jpg

www.512.net 27

www.512.net 28

JavaScript 工具

  • Modernizr 2
    Modernizr 是一个广泛使用的开源 JavaScript 库,可以帮助您构建 HTML5
    和 CSS3-powered
    的网站。现在可以将功能检测与媒体查询和条件资源加载相结合,这为您提供了在各种情况下进行优化的能力和灵活性。

www.512.net 29

  • FitText
    FitText 是用于响应和流畅布局的 jQuery
    插件,可以调整显示文本的大小以适应父元素。它也是一个很好的解决方案,用于创建从小型移动设备到30英寸桌面显示器,所有内容都能很好显示的标题。

www.512.net 30

  • jQuery
    Waypoints

    Waypoint 是一个小型 jQuery
    插件,可以在您滚动到组件时轻松执行某个功能。

www.512.net 31

  • ligature-js
    该 Java
    脚本允许您通过浏览网页上的文本并在适当的位置插入连字,将文本模式转换为通用的印刷排版连字。

www.512.net 32

  • StronglyTyped
    一个 JS 库,允许您指定各种类型(布尔值、数字、字符串等)和常量(
    Java 中的最终属性)的强类型属性。 它使用 ES5 getter 和
    setter,并在不支持的浏览器中恢复为常规、松散类型的属性。

www.512.net 33

  • Kaffeine
    JavaScript 语法的扩展,试图使其更好用。与 JavaScript
    非常类似,代码可以直接编译成JavaScript。

www.512.net 34

  • Crossroads.js
    一个灵感来自 URL Route / Dispatch 实用程序的 JS 路由库,它们存在于像
    Rails、Pyramid、Django、CakePHP、CodeIgniter
    等框架上。它解析一个字符串输入,并通过将字符串与多个模式匹配来决定执行哪个操作。

www.512.net 35

  • HEAD.js
    一个脚本,可以加快、简化和现代化您的网站 – 简明扼要的解决普遍问题。
    您可以加载脚本,如图像,以及安全地使用 HTML5 和 CSS3 。

www.512.net 36

  • The JavaScript Grid
    基于 JavaScript 的覆盖网格——只需将代码片拖动到书签栏中,打开您的 URL
    并单击书签。

www.512.net 37

  • Grid Calculator
    一个可以帮助您轻松创建自己的网格并将其下载到 Adobe Illustrator 或
    Photoshop 的计算器。

www.512.net 38

  • Griddle.it
    一种干净简单的方法来帮助您调整布局。所有您所需要做的是将尺寸放在提供的
    URL
    之后,使一个背景引导图片可以在您的浏览器上工作。网格是动态创建的,所以任何组合都能工作。

www.512.net 39

1 赞 2 收藏
评论

www.512.net 11

每日推荐

所以今天我收集一系列省时的、有用的 HTML、CSS 和 JavaScript
资源给大家。我希望这些工具将帮助您提高专业技能以及工作流程。

拖动蓝点,让所有线都不相交,看看你多久能解开? 🙂

干净,漂亮的站点。口号吸引我们的眼球,你可以刷新显示不同的文字组合。

1、前言

前H端开发很奇妙:
它入门很简单,但是想要成为大牛却很难。有太多的事情需要考虑,到处都有需要微调的地方,太多的细节处理才能保证让一切都刚刚好。幸运的是,开发者和设计师一直致力于为我们提供有用的工具和资源,来提高我们的技能、让我们做的更好。

  1. Z Type

2.Factoria

2、Initializr

Initializr

此工具创建一个基于 HTML5 Boilerplate 的可自定义模板。 在 JavaScript 和
jQuery 之间进行选择,决定是否要样本内容,并指定兼容性和服务器配置需求。
您将获得一个拥有 Boilerplate 主要功能的模板,以开始您的项目。

www.512.net 41

www.512.net 42

3、Layer Styles

Layer Styles

一个非常简单的工具,以直观的方式来创建 CSS
——非常像一个图形编辑器。该工具允许您添加阴影、内阴影、背景、边界和圆角和生成跨浏览器的
CSS 代码。

一款太空射击游戏,基于ImpactJS游戏库开发。

非常动画的一个站点,右侧位置的滑动效果不错。

4、Mobile Boilerplate

Mobile Boilerplate

一个能够创建丰富的和高性能的移动 Web
应用程序模板。它可以保证各种浏览器的兼容性,不仅能兼容各种高端智能机,也能兼容旧版的黑莓、塞班、以及微软的移动平台。

  1. Cube Out
  1. Tom Pain

5、Vogue

Vogue

该工具在所有浏览器中重新加载页面的样式表(而不是 HTML
),甚至可以配置为在多个浏览器中同时自动重新加载页面。
该工具不托管您的网站,而是运行您的网站本身的本地服务器。
要使用它,只需安装 NodeJS 和 npm 。

www.512.net 43

www.512.net 44

6、Css-x-fire

Css-x-fire

此工具允许从 Firebug CSS 编辑器编辑 IDE 中的 CSS
属性,并允许开发人员专注于 CSS 样式,而无需刷新浏览器。

模仿经典的益智游戏Blockout(三维俄罗斯方块),移动和旋转方块填补空白,完成一层后会自动消隐。

吸引人的内容幻灯,当页面加载时,好似一个Flash网站。

7、Ffffallback

Ffffallback

一个可以让您测试不同字体栈以找到最佳结果的书签。它扫描页面的 CSS
并创建一个克隆页面,您可以在其中测试和分析不同的 fallback 字体。

  1. Bounce
  1. Pixillion

8、Spritemapper

Spritemapper

该应用程序将多个图像合并为一个,并为相应的切片生成 CSS 定位;
通过减少图像的数量和更好地利用连接,CSS spritemapping
可以减少您的网站的加载时间。

www.512.net 45

www.512.net 46

9、PCSS

PCSS

一个 PHP 驱动的 CSS 预处理器,可以帮助您以更少的代码释放 CSS3
的功能,如类嵌套、服务器端浏览器细节、默认单位和变量。该工具需要 PHP5。

如果你有更好的心得和建议,欢迎拍砖一起探讨。欢迎搜索微信公众号加入【极客小寨】。

欢迎加入QQ群【极客小寨】(689112212)。

www.512.net 47

wechat_code01.jpg

欢迎关注投稿~

一款javascript游戏,点击和控制蓝色的盒子,让黄色的点击不要碰到红色的点。

滚动条与jQuery Masonry的完美组合。

  1. Sketch 3D
  1. Moovents

www.512.net 48

www.512.net 49

一款非常棒的素描工具,这里可看别人的作品。

大规模的视差效果。

  1. Conductor
  1. Allan Yu

www.512.net 50

www.512.net 51

Conductor转换纽约地铁系统为一个互动的弦乐器,使用真实的地铁时刻表来模拟。

第一眼,你会被布局所迷惑。慢慢你会发现一些有趣的…

  1. Bacterium
  1. Gauged2

www.512.net 52

www.512.net 53

模仿水族馆,您可以创建丰富多彩,充满活力的运动模式。

出色的滑动效果… parallax插件延迟滑动。
 

8.Ultra Neuron Pong

  1. Momento App

www.512.net 54

www.512.net 55

这是模仿经典的Pong游戏开发的一款基于HTML5技术的游戏。

Momento
app是个丰富的iPhone应用站点。它有2个以上的不错的图片gallery组成,值得一看。

  1. Tank World

原文链接:

www.512.net 56

1. We are fixel
干净,漂亮的站点。口号吸引我们的眼球,你可以刷新显示不同的文字组合。
2.Factoria 非常动画的…

一款让人惊叹的三维射击游戏。

原文链接:

  1. Untangle 拖动蓝点,让所有线都不相交,看看…
You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图