react-snowstorm
A Snow Effect component for React. Uses Snowstorm under the hood.
Live Demo : http://burakcan.github.io/react-snowstorm
Getting Started
Installation
$ npm install --save react-snowstorm
Usage
import React, { Component } from 'react';
import SnowStorm from 'react-snowstorm';
class MyComponent extends Component {
render(){
return (
<div>
<SnowStorm />
</div>
)
}
}
Available Options (props)
-
animationInterval = (default = 33) Theoretical "milliseconds per frame" measurement. 20 = fast + smooth, but high CPU use. 50 = more conservative, but slower
-
excludeMobile = (default = true) By default, mobile devices are excluded from the snow effect to be nice to their CPUs (and batteries.) If your local marketing department insists, "This must work on mobile!" despite being warned of the downsides, you can set this option to false to enable Snowstorm on devices like the iPhone, iPad and Android phones etc. The demo page has the effect enabled for mobile devices.
-
flakeBottom = (default = 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.
-
flakesMax = (default = 128) Sets the maximum number of snowflakes that can exist on the screen at any given time.
-
flakesMaxActive = (default = 64) Sets the limit of "falling" snowflakes (ie. moving on the screen, thus considered to be active.)
-
followMouse = (default = true) Allows snow to move dynamically with the "wind", relative to the mouse's X (left/right) coordinates.
-
freezeOnBlur = (default = true) Stops the snow effect when the browser window goes out of focus, eg., user is in another tab. Saves CPU, nicer to user.
-
snowColor = (default = '#fff') Don't eat (or use?) yellow snow.
-
snowCharacter = (default = '•') • (•) = bullet. · 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.
-
snowStick = (default = true) Allows the snow to "stick" to the bottom of the window. When off, snow will never sit at the bottom.
-
targetElement = (default = null) An HTML element which snow will be appended to (default: document body.) Can be an element ID string eg. 'myDiv', or a DOM node reference. See relative and absolute-positioned examples.
-
useMeltEffect = (default = true) When recycling fallen snow (or rarely, when falling), have it "melt" and fade out if browser supports it
-
useTwinkleEffect = (default = true) Allow snow to randomly "flicker" in and out of view while falling
-
usePositionFixed = (default = false) true = snow not affected by window scroll. may increase CPU load, disabled by default - if enabled, used only where supported.
-
vMaxY = (default = 5) and vMaxX = (default = 8) Defines maximum X and Y velocities for the storm; a random value in this range is selected for each snowflake.
92 Dec 17, 2022
571 Nov 21, 2022
8 May 6, 2022
39 Dec 19, 2021
1.8k Dec 9, 2022
340 Dec 23, 2022
58 Sep 3, 2022
80 Dec 1, 2022
976 Dec 30, 2022
195 Dec 30, 2022
50 Oct 28, 2022
51 Nov 15, 2022
246 Dec 27, 2022
19 Sep 25, 2022