DemoHouse

摘要：我是属于喜欢收集各种有意思的有吸引的。收集它们主要出于给自己增涨见识给自己做练习给创意提供储备其实除了这些，还可以把它给有需要的同学。出于这些，花了两年多时间收集了各式各样的前端案例，有纯的，有皮肤的，有动效的。除此之外，还有另外两种方式。

这篇文章不是纯介绍技术的文章，但其实里面的内容是有关于前端技术的。

或许会问DemoHouse是什么?其实它就是一个个人开源的项目，而这个项目里面的内容又不是自己写的，是收集过来的。在Github上，我用自己蹩脚的英文对DemoHouse是这样描述的：

DemoHouse is a collection of JavaScript, CSS3, Canvas, SVG and Web Animation demos.

简单点说：DemoHouse就是收集了很多前端案例。比如JavaScript、CSS3、SVG、Canvas和Web动画等。

那么为什么要整DemoHouse呢？

这主要可能是出于自己对前端的兴趣爱好吧。我是属于喜欢收集各种有意思的、有吸引的Demo。收集它们主要出于：

给自己增涨见识

给自己做练习

给创意提供储备

...

其实除了这些，还可以把它给有需要的同学。比如有同学找我要一种动效的效果，我能告诉他在哪可以找到；比如有同学找我要学习案例，我能告诉他在哪可以有案例参考，等等。

出于这些，花了两年多时间收集了各式各样的前端案例，有纯UI的，有Web皮肤的，有动效的。为了这些资源能更好的给有需要的同学，我在Github上创建了一个仓库DemoHouse。

如果你看到了这里，或许你更想知道的，我怎么使用DemoHouse。

其实很简单，现在访问DemoHouse有三种方式，最简单的方式，就是在浏览器地址中直接输入DemoHouse的首页地址：https://airen.github.io/DemoHouse/。除此之外，还有另外两种方式。

喜欢W3cplus的同学，或许发现了，主导导航上新增加了一个案例菜单项，那么点击这个菜单项，也可以直接进入DemoHouse首页：

还有一种方式，那就是打开DemoHouse在Github上对应的仓库地址：https://github.com/airen/DemoHouse，然后点击首页地址，也可以访问。

如果你希望看到对应的Demo效果，那么按照前面的方式，进入到DemoHouse首面，可以看到Demo的清单，点击清单，可以看到对应的Demo效果：

看到好的效果，想到示例的源码，也可以轻松得到，你可以直接通过GitHub的Fork功能，把项目Fork到你的名下，你也可以直接通过:

git clone git@github.com:airen/DemoHouse.git

或者

git clone https://github.com/airen/DemoHouse.git

把整个项目克隆到你的本地。当然除了使用git命令克隆项目之外，还可以直接点击下载整个项目：

如果你对DemoHouse也非常感兴趣，觉得对你有所帮助，你可以在首页给DemoHouse点个赞：

如果你发现DemoHouse中有错误，可以点击这里给我们提ISSUE。当然也可以在像下图一样在GitHub上操作:

当然，如果你手上有优秀的Demo，更希望你能DemoHouse提PR，让其他同学分享你的成果，当然，你也可以直接把你的Demo发到我的邮箱:w3cplus@hotmail.com

DemoHouse现在访问起来非常的不方便，只因自己目前技术有限，不能给大家带来更好的访问体验。但我或将来的小伙伴努力之下，会有所改变：

增加分类

增加过滤

增加分页

增加信息

增加DEMO

...

DemoHouse上面的案例效果，大部分都不是我自己动手写的，我只是互联网上的一名搬运工，将一些自己觉得有意思的Demo搬到了这里。在此要非常感谢他们，才让我能收集这些Demo，也才能让大家看到这么多优秀的Demo:

GitHub

Codrops

CodyHouse

CodePen

还有很多没有提到的个人或组织。

DemoHouse是一个开源的项目，期盼更多爱分享的同学一起加入共建，分享你的Demo、分享你的技术等等。如果你觉得DemoHouse对你的工作或学习有所帮助，请将他推荐给你身边的朋友，让给我点赞: