关♥生活,关注互联网。
比较拉风的特效尝试
正如你所看到的,小博的主题有了些变化,写篇文章记录之。
这个修改灵感来自于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年前
html5吗?超帅哟
约14年前
呵呵,谢谢,希望能为你的新主题开发带来灵感。
约14年前
好文好文 不顶不行了
约14年前
CPU要高一点了啊
约14年前
呵呵,正是纠结这个问题,所以现在才做尝试。
约14年前
这个特效果然很不错!
约14年前
我在任何情况下都会优先考虑IE,为用户着想。不支持IE的方式都是浮云。
约14年前
关于IE用户的问题我是这样考虑的:
首先调用加入特效的CSS文件,header中加入判断语句,如果是IE用户则用原主题的样式表规则覆盖;
这样IE用户看到的仍是修改之前的主题(并非主题“不支持IE”),支持canvas的浏览器才看得出变化。
选择IE早期版本的访客估计不会对新特效感兴趣,而有可能喜欢该特效的童鞋估计大都使用新浏览器。
这正是用户与网页双向选择的结果,而我们要做的正是投用户所好。
约14年前
HTML5这么牛逼?这效果好酷啊 喜欢 真的很喜欢!
约14年前
这还只是HTML5新特性的一小部分呢,
勤于折腾,你还能整出更好的效果,嘿嘿。
约14年前
电脑上的时候一定要体验下这个效果!
约14年前
呵呵,随时欢迎。
约14年前
这效果的确很好,我也很喜欢!
约14年前
确实蛮屌的
约14年前
谢谢。
约14年前
跟风族,还不错。
约14年前
! 是不是
约14年前
个人觉得,这体验相当不好
约14年前
首先感谢你提出的意见,我相信有不少人赞同你的观点,只是没在这儿提出;
既然是一个比较大胆的尝试,就肯定不可能只有好的一面,并且让每个人在第一次体验后全盘接受(虽然我希望)。
根据你的意见,我觉得要提升体验 首先要解决代码效率问题 以及如何让初次访问者不感到突兀,
个人技术能力有限,只能由高手来实现了,这篇文章权当抛砖引玉。
约14年前
增加网页的动态效果,打破传统网页背景不变前景变的惯势,当然,这还要归功于HTML5这类新技术的支持,动态背景的思路会否引发一场新的设计潮流,天知道;另一方面由于去掉了背景图片,修改后页面加载速度明显加快。
这个不错啊。。。。谢谢啊。。。
约14年前
不敢用,怕拖慢了博客。
约14年前
对阅读的体验是一种劣化,不建议长期使用。
约14年前
嗯嗯嗯,确实,寻找解决方案ing 。