Although many other 'snow fall' type effect stacks exist for RapidWeaver, Blizzard has the key advantage of letting users toggle the effect on and off. Undoubtedly some people to your website may find the effect annoying, so the ability to turn it off (and remember that preference using cookies) is a huge advantage over similar stacks. Plus Blizzard includes a lot of additional settings; many of which don't even feature in paid stacks! So Blizzard is definitely the best in its category.

Ordinarily, these snowing effects can be very processor-intensive. To help combat this, Blizzard is only active when the browser window is in focus. The snowfall effect can be disabled on smaller handhelds.

Example

As this page loads, you should see the snow effect start. To switch the effect on and off, you can use the buttons below. If you check your browser developer console, you'll be able to see the tracking cookie being set. The cookie is named disable-snowing.
 
Stop Snowing! Give Me Snow!
 

Setup

To use Blizzard in your own website, please follow these instructions:
  1. Download and install Blizzard in the normal way.
  2. Once installed into Stacks and RapidWeaver, open your Stacks Library and search for 'Blizzard'.
  3. Drag and drop a copy of the stack into your webpage. Only ever include one Blizzard stack, on each page.
  4. Select the Blizzard stack in edit mode, so that it's highlighted.
  5. Within the Stacks side panel, customise the settings. Keep previewing the page to test your changes.
  6. If using the time control or cookie options, the file extension of the page needs changing to .php within the RapidWeaver Page Inspector.
  7. Save the changes when done. Export or publish your website in the normal way.

All Blizzard settings display informational tooltips on mouseover. These provide you specific details about what each setting does.

If you want to include Blizzard on multiple pages of your website, then the easiest way to accomplish this is by creating a Partial. Or you can include Blizzard in an existing partial, like a header or footer partial.

If you do not see snowflakes appear (or the snowflakes disappear behind other page elements) then you may need to adjust the z-index value. Z-index is the CSS stacking order applied to each snowflake. Increase the z-index value conservatively, until you can get the snowflakes to show. Avoid really high z-index values if possible, because these could adversely effect webpage accessibility. It may also be necessary to use custom CSS code to apply z-index to elements in your page, like headers, main content containers and footers.

Snow flakes are white by default. If the background of your website is predominately white, then you should consider changing the snowflake colour. Light blue or grey can look good. Opacity is supported too, if you want to make them semi-transparent. Snowflakes are rendered as simple white dots, using CSS. Other designs (like emoticons or icons) are not currently supported by this stack.

To create buttons that allow website users to toggle the snowflake effect on and off, use any button stack of your choice. Drag and drop the buttons into CookieManager or MiniCookie stacks. Set those stacks to create or delete cookies. If for example you have Blizzard set to Snow If Cookie Does Not Exist and a cookie name of disable-snowing, then you can watch for the presence of that cookie and disable the snow effect if that's what the website user wants.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.