为博客添加下雪功能

网站应用 - 十二月 20, 2009 - 来源:单点日志 - No Comments -

Snowstorm: A Javascript Snow Effect for HTML

看到wordpress有插件 let it snow,激活后有下雪功能,感觉不错,当然我想也可以修改成掉钱、掉话、掉美女什么的,研习下应该可以实现。如果是wordpress查找let it snow插件。

其他,可以下载Snowstorm Javascript 自己安装调试,下载http://www.schillmania.com/projects/snowstorm/

调用方法:

<script type="text/javascript" src="snowstorm.js"></script>

其他只是一些设置问题,研习下国外的那个网站就好,这个恐怕很少用到,只是好玩,而且
也会影响用户体验。

Let It Snow.

So, you want Javascript snow on your web site, eh?

Snowstorm
is a Javascript-driven snow effect that can be easily added to web
pages. It is free for use, and easy to set up. A single Javascript file
provides the functionality required. No images are used for the snow
effect.

I’d like to use this on my site.

This is all you need to get started:

<script type="text/javascript" src="snowstorm.js"></script>

See this basic example for reference.

What kind of things can I customize?

You
can adjust the snow speed, the amount of snow, the “wind”, if and where
it should stick (and if it should “melt”), and finally, whether the
snow can react to the mouse moving (ie., “wind changes.”) See Customizing Snowstorm for more.

And the Christmas Lights?

The christmas lights are a separate experimental script which also has an example. It is undocumented, but the script can be modified to taste if you’re the adventurous type.

Download

ZIP file, includes this demo page and source code.

Technical Notes

Snowstorm
works under most of the old major browsers (IE 5.x+, Netscape 6+) as
well as IE 6, 7, 8, Firefox, Safari and Opera, and the iPhone. If you
are seeing snow as you read this, then the script is working as
expected.

CPU Use

Snowstorm will
eat up a lot of CPU, even on modern computers, because of the number of
elements being moved around the screen at once. The basic example
does have notably lower CPU use because it doesn’t include the
christmas lights, and the page layout is much simpler. Consider raising
the animation interval, and lowering the amount of snowflakes (active
and max) to help reduce CPU use.

Implementation

One Javascript reference is required. Aside from customization, that’s it!

<script type="text/javascript" src="snowstorm.js"></script>

Customizing Snowstorm

Once
you have Snowstorm running in your page, you can customize its
properties either by editing the snowstorm.js file directly, or
assigning new values to the snowStorm object after snowstorm.js has
loaded.

For example:

<!-- required snowstorm JS, default behaviour -->
<script type="text/javascript" src="snowstorm.js"></script>

<!-- now, we'll customize the snowStorm object -->
<script type="text/javascript">
snowStorm.snowColor = '#99ccff'; // blue-ish snow!?
snowStorm.flakesMaxActive = 96; // show more snow on screen at once
snowStorm.useTwinkleEffect = true; // let the snow flicker in and out of view
</script>

See this customized example in action.

Configurable Properties

Snowstorm can be fairly easily customized; some of the major properties are listed below.

1
snowStorm.flakesMax = 128;
Sets the maximum number of snowflakes that can exist on the screen at any given time.
1
snowStorm.flakesMaxActive = 64;
Sets the limit of “falling” snowflakes (ie. moving on the screen, thus considered to be active.)
1
snowStorm.animationInterval = 33;
Theoretical “miliseconds per frame” measurement. 20 = fast + smooth, but high CPU use. 50 = more conservative, but slower
1
snowStorm.flakeBottom = null;
Limits
the “floor” (pixels) of the snow. If unspecified, snow will “stick” to
the bottom of the browser window and persists through browser
resize/scrolling.
1
snowStorm.followMouse = true;
Allows snow to move dynamically with the “wind”, relative to the mouse’s X (left/right) coordinates.
1
snowStorm.targetElement = null;
Element which snow will be appended to (document body if null/undefined) – can be an element ID string, or a DOM node reference
1
snowStorm.snowColor = '#fff';
Don’t eat (or use?) yellow snow.
1
snowStorm.snowCharacter = '•';
&bull;
(•) = bullet. &middot; entity (·) is not used as it’s square on
some systems etc. Changing this may result in cropping of the character
and may require flakeWidth/flakeHeight changes, so be careful.
1
snowStorm.snowStick = true;
Allows the snow to “stick” to the bottom of the window. When off, snow will never sit at the bottom.
1
snowStorm.useMeltEffect = true;
When recycling fallen snow (or rarely, when falling), have it “melt” and fade out if browser supports it
1
snowStorm.useTwinkleEffect = true;
Allow snow to randomly “flicker” in and out of view while falling
1
snowStorm.usePositionFixed = false;
true = snow not affected by window scroll. may increase CPU load, disabled by default – if enabled, used only where supported.
1
snowStorm.vMaxX = 8, snowStorm.vMaxY = 5;
Defines maximum X and Y velocities for the storm; a random value in this range is selected for each snowflake.

Methods

Snowstorm has a few basic methods for controlling the snow effect.

1
snowStorm.randomizeWind()
Sets the wind speed with a random value relative to vMaxX and vMaxY properties.
1
snowStorm.freeze()
Stops the snow effect in place.
1
snowStorm.resume()
Continues snowing from a “frozen” state.
1
snowStorm.toggleSnow()
Enables or disables the snow effect depending on state, same as calling freeze() or resume().
1
snowStorm.stop()
Freezes
and kills the snowstorm effect, and removes related event handlers.
Snowstorm will not work properly if other methods are called after
stop().


无觅相关文章插件,快速提升流量

《为博客添加下雪功能》由单点日志原创提供!
转载请注明:http://spoint.babyshoot.cn/archives/2009/12/post-91.html

No Comments│赶紧发话! »

发表评论

您必须登录后才能发表评论。
8