关♥生活,关注互联网。
比较拉风的特效尝试
正如你所看到的,小博的主题有了些变化,写篇文章记录之。
这个修改灵感来自于Android自2.1版本开始引入的动态壁纸效果,前景仍然是静态的图标、时钟、播放器微件之类,但背景一动起来,立体效果就多少有了一些。
兼容性:ie就没办法啦,就用原本主题的样式;Opera, FireFox, Chrome, Safari几个浏览器都支持canvas,Chrome下浏览体验最佳,在偶的机子上用Firefox打开博客略卡。
好处,增加网页的动态效果,打破传统网页背景不变前景变的惯势,当然,这还要归功于HTML5这类新技术的支持,动态背景的思路会否引发一场新的设计潮流,天知道;另一方面由于去掉了背景图片,修改后页面加载速度明显加快。
缺陷,新访客开始可能不能适应,注意力容易从内容分散到背景的变化。好在鼠标在内容部分时,背景色较鼠标移到外围区域时来得缓和,貌似鲜艳的颜色容易使人不淡定 不利于阅读,对于拉动滚动条浏览的访客……就让他兴奋点吧;同时,canvas的实现会占用较多的cpu资源(又或者是这里的使用方法欠妥),尤其是 mouse over function ,鼠标在页面中移动时低配置的机器鼠标滞感比较明显,操作体验下降。
虽是用到html5这么个比较新鲜的东东,但实现的原理也不复杂:建立canvas元素,然后通过 JavaScript 完成简单的动画。主要实现原理都可以在这个演示的代码中了解,前半部分JavaScript是在canvas元素中创建渐变,后半部分在鼠标移动时触发,产生跟随鼠标的白色亮点区域。有兴趣的童鞋也可以试试哈,以下是一些你可能用得到的素材,大都是canvas实现的特效:
更多演示可以到这篇文章查看。
说了这么多都是博主自己的观点,究竟这个尝试的效果如何,当然还要由访客们说了算。欢迎大家发表自己的看法,有什么什么不足或者更好的实现方法都可以共同探讨哈。
P.S(20101205):
做了点改进,现在默认情况下背景是黑白渐变,按“Esc”键后可以调整背景效果,再按一次固定啦,这样就避免了消耗资源过大的问题(WebKit核心浏览器下有效)。另外修正了IE8下的问题,感谢默默童鞋的提醒。
约14年前
挺酷的,让 flash 情何以堪
约14年前
Firefox对新特效的的确支持不如Webkit的唉,一不注意就卡死..话说,个人不是很喜欢自动播放的东西,比如首页的圣诞flash,嘿嘿..
约14年前
额,这个。。。节日嘛,就图个气氛,呵呵。
约14年前
报告测试,ie9 beta和pp7 下面canvas可以正常运作,但是你的检测方式导致一张背景图一直占着位置。
约13年前
多谢反馈,有时间会修正的哈,圣诞节快乐~.