一行代码给你的Blog添加下雪效果

前段时间冷空气突袭的时候,据说郊区密云的雪积得挺厚,但北京城内除了飘了一点小雪粒,毫无动静。应该是气温过高所致,我在慈云寺桥附近拍下的照片可以很好的解释这一点。

不过最近WordPress.com倒是提供了一种让你在Blog下雪的方法(原作者是Scott Schiller),只需要将这行代码加在你Blog的任何位置即可,不需要额外的负担:不用自己维护图片和JavaScript文件(WP.com会帮你出带宽费用,哈哈~)

注意:如果你的Blog不支持JavaScript,则无法使用这一效果,抱歉。

引用代码如下:

http://s1.wordpress.com/wp-content/plugins/snow/snowstorm.js

如果希望拥有像我的Blog这样的效果,即让雪停留在某一固定高度,例如我现在将雪停留在导航栏上,只需要引用我修改后的js即可。为了不影响加载速度,放到</body>前面即可。

所有TES主题用户都可以直接使用这个代码:

var aw_snow_jssrc = '%3Cscript type="text/javascript"';
aw_snow_jssrc += 'src="http://vosforever.app';
aw_snow_jssrc += 'spot.com/static/snow.js"%3E%3C/script%3E';
document.write(unescape(aw_snow_jssrc));

其它主题用户,如果希望改变雪落下的位置,可以使用这个代码:

var customizedHeight = 0;
var aw_snow_jssrc = '%3Cscript type="text/javascript"';
aw_snow_jssrc += 'src="http://vosforever.app';
aw_snow_jssrc += 'spot.com/static/snow.js"%3E%3C/script%3E';
document.write(unescape(aw_snow_jssrc));

同时,你可以根据你的页面导航情况自己定义customizedHeight的值,单位为像素,代表雪停留的位置与页面头部的距离。如果设为0,则落下的雪花会停留在页面最底部。

Advertisements

63 thoughts on “一行代码给你的Blog添加下雪效果

  1. 用了let-it-snow插件。
    AW的这个loading越来越好看了,能不能不用黄色来代表未加载完的部分……感觉跟初一生物上学的血液的血和那个血清差不多。。。

    1. 为这个效果用一个WordPress的插件不太值得。呵呵,至少懂一点HTML的话没有必要:)

      呃,loading的效果只是一次简单的尝试,有空再更新。

  2. 不知道多高,直接写了个1600,结果白色的动态从顶部而下……
    不过那个白色,在我白色顶栏衬托下确实不太显眼,还赶上我主题背景白色
    不过是好玩的东西,赞一个

  3. AW你好,看到你这篇blog,很喜欢,谢谢分享。同时请教一个相关的问题,前段我看到一个网页上也有雪花的效果http://themelib.com/,我找到了它的JS文件http://themelib.com/wp-content/themes/arthemia/snow.js,但是加到自己的blog上却无法实现那个网页上的效果,特别是页面loading过程中,雪花在网页顶部快速的横向移动,然后再飘落下来这个效果。我不大懂JS,还烦请AW解答,这个效果是如何实现的。谢谢了!

  4. 本地FF试过了 没问题 比如把下面的代码放到FF的书签工具栏

    javascript:var x= function(){var h=document.createElement(‘script’);h.src=’http://s1.wordpress.com/wp-content/plugins/snow/snowstorm.js’;h.type=’text/javascript’;document.getElementsByTagName(‘head’)[0].appendChild(h)}();

    1. 这个建议虽然不安全,但是比较实用。。。。至少我的AppEngine被黑的可能性是很小的。

      介意安全性的人自然会下载到自己的服务器。

  5. 胸台。。。翻墙出wordpress.com 发现http://s1.wordpress.com/wp-content/plugins/snow/snowstorm.js已经404 找不到了。。。。。。

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s