正如你所看到的,小博的主题有了些变化,写篇文章记录之。

这个修改灵感来自于Android自2.1版本开始引入的动态壁纸效果,前景仍然是静态的图标、时钟、播放器微件之类,但背景一动起来,立体效果就多少有了一些。

兼容性:ie就没办法啦,就用原本主题的样式;Opera, FireFox, Chrome, Safari几个浏览器都支持canvas,Chrome下浏览体验最佳,在偶的机子上用Firefox打开博客略卡。

好处,增加网页的动态效果,打破传统网页背景不变前景变的惯势,当然,这还要归功于HTML5这类新技术的支持,动态背景的思路会否引发一场新的设计潮流,天知道;另一方面由于去掉了背景图片,修改后页面加载速度明显加快。

缺陷,新访客开始可能不能适应,注意力容易从内容分散到背景的变化。好在鼠标在内容部分时,背景色较鼠标移到外围区域时来得缓和,貌似鲜艳的颜色容易使人不淡定 不利于阅读,对于拉动滚动条浏览的访客……就让他兴奋点吧;同时,canvas的实现会占用较多的cpu资源(又或者是这里的使用方法欠妥),尤其是 mouse over function ,鼠标在页面中移动时低配置的机器鼠标滞感比较明显,操作体验下降。

canvas colorful-background

虽是用到html5这么个比较新鲜的东东,但实现的原理也不复杂:建立canvas元素,然后通过 JavaScript 完成简单的动画。主要实现原理都可以在这个演示的代码中了解,前半部分JavaScript是在canvas元素中创建渐变,后半部分在鼠标移动时触发,产生跟随鼠标的白色亮点区域。有兴趣的童鞋也可以试试哈,以下是一些你可能用得到的素材,大都是canvas实现的特效:

更多演示可以到这篇文章查看。

说了这么多都是博主自己的观点,究竟这个尝试的效果如何,当然还要由访客们说了算。欢迎大家发表自己的看法,有什么什么不足或者更好的实现方法都可以共同探讨哈。

P.S(20101205):

做了点改进,现在默认情况下背景是黑白渐变,按“Esc”键后可以调整背景效果,再按一次固定啦,这样就避免了消耗资源过大的问题(WebKit核心浏览器下有效)。另外修正了IE8下的问题,感谢默默童鞋的提醒。