个人网站, http://lorem.in

2014-06-21 16:46:05 +08:00
 coraline
之前弄了个基于grunt的前端开发,上线框架 Wframe https://github.com/LoeiFy/WFrame

为了弄个例子出来,就顺势做一个网站出来, http://lorem.in

网站是挂在Github上,可能奇怪的有点慢。

同时对pc跟手机做了适配,体验都不错,鼠标键盘都可以操作 swipe, tap, scroll or keyboard to navigator

兼容性的话都明白的,我没那么多心思去兼容,但是高级点的浏览器都没有问题,可能有一些bug,以后在修复了
9924 次点击
所在节点    分享创造
54 条回复
pagecho
2014-06-21 16:47:56 +08:00
最后的那个模糊效果好厉害啊!有教程么?
JoyNeop
2014-06-21 16:52:07 +08:00
卧槽这域名屌炸了
Livid
2014-06-21 17:10:52 +08:00
Server not found.
wzxjohn
2014-06-21 17:12:45 +08:00
@JoyNeop 域名怎么了?
wzxjohn
2014-06-21 17:13:09 +08:00
git上国内访问慢很正常啊。。。没啥好奇怪的=。=
coraline
2014-06-21 17:22:52 +08:00
@pagecho

canvas 重新画一张图 模拟

@Livid 是在Github上的,用dnspod做解析,访问不了我也不明白为什么
Geeker
2014-06-21 17:24:08 +08:00
我手抖按了下 Tab 键 。。
paloalto
2014-06-21 17:26:11 +08:00
@pagecho lz 用的是 canvas 实现模糊。

var CanvasImage = function(a, b) {
this.element = a,
this.image = b,
this.element.width = this.image.width,
this.element.height = this.image.height,
this.context = this.element.getContext("2d"),
this.context.drawImage(this.image, 0, 0)
};

CanvasImage.prototype.blur = function(a) {
this.context.globalAlpha = .5;
for (var b = -a; a >= b; b += 2) for (var c = -a; a >= c; c += 2) this.context.drawImage(this.element, c, b), c >= 0 && b >= 0 && this.context.drawImage(this.element, -(c - 1), -(b - 1));
this.context.globalAlpha = 1
},
paloalto
2014-06-21 17:27:38 +08:00
@pagecho 嫌麻烦的话,可以试试这个:

https://github.com/jakiestfu/Blur.js

blur.js is a jQuery plugin that produces psuedo-transparent blurred elements over other elements.
mortal
2014-06-21 17:29:43 +08:00
牛啊。。。
pagecho
2014-06-21 17:43:25 +08:00
@paloalto 成功了。。。好屌!!!
guoqiao
2014-06-21 17:43:34 +08:00
能不能把错别字改下,强迫症的表示难受…
P233
2014-06-21 17:47:52 +08:00
@paloalto 补充 SVG Filter

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="7" />
</filter>
</svg>


#div { filter:url(#blur) }

上一句在 Firefox 中需要写成 inline style, 写进 CSS 文件中无效,搜了下没人提过,也不知道为什么
iislong
2014-06-21 17:50:17 +08:00
@wzxjohn 里面有个撸过(guo.lu)的域名,进去后应该注意到
jdqingm
2014-06-21 19:22:32 +08:00
好帅气…
wintr
2014-06-21 20:01:51 +08:00
最后 DESIGN 拼错了
taobeier
2014-06-21 20:05:18 +08:00
很漂亮!
coraline
2014-06-21 20:24:50 +08:00
@Geeker 哈哈

@guoqiao 已经修正,不小心打多一个字母

@wintr 谢谢
jaylong
2014-06-21 20:51:58 +08:00
楼主的http://guo.lu 这个很赞啊
wildplant
2014-06-21 21:17:09 +08:00
@coraline 好牛啊。是哪里的牛人?

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/118795

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX