{"_id":"56b0c5d81486990d009c101a","project":"542979c51215fe08007e0ee5","__v":12,"category":{"_id":"5429898d1215fe08007e0fe6","pages":["5429ad872e366c080086b5c6","5429cb1b2e366c080086b777","542db0adcb19820800c1f4a3","54380c2df15a8e1400831f88","542aee7d54d88d140075ff00","542af02f54d88d140075ff14","542f14abacabcf080095953b","54651c6df42a472000b0c611","55f81b4f59eace0d0087db2b","56b0c5d81486990d009c101a","56babbffc275570d00ce7105"],"project":"542979c51215fe08007e0ee5","version":"542979c51215fe08007e0ee8","__v":10,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2014-09-29T16:32:13.661Z","from_sync":false,"order":1,"slug":"helpers","title":"Helpers"},"parentDoc":null,"user":"542979b61215fe08007e0ee4","version":{"_id":"542979c51215fe08007e0ee8","project":"542979c51215fe08007e0ee5","__v":4,"createdAt":"2014-09-29T15:24:53.437Z","releaseDate":"2014-09-29T15:24:53.437Z","categories":["542979c51215fe08007e0ee9","542985897a6b690800767fab","5429898d1215fe08007e0fe6","542ac5aa54d88d140075fcaf"],"is_deprecated":false,"is_hidden":false,"is_beta":true,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-02-02T15:06:00.911Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":10,"body":"The `{snow}` Helper makes it easy to add an ambient falling snow special effect to your emails.  The technique for this special effect was introduced in FreshInbox's [Ambient Animations in Email: Snow and Stars](http://freshinbox.com/blog/ambient-animations-in-email-snow-and-stars/) tutorial.  Inkcite's implementation adds a variety of powerful customization features.\n\n## Usage\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{snow}\\n   image (recommended) or content that will have falling snow\\n   animated over it.\\n{/snow}\",\n      \"language\": \"html\",\n      \"name\": \"source.html\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Note!\",\n  \"body\": \"This special effect is currently only supported in Webkit-powered email clients.  You can, however, preview it in all modern browsers while developing your email.  If Inkcite generates a web-hosted version of the email, the animation will be enabled for all modern browsers.\"\n}\n[/block]\n## Parameters\n\nEach time the `{snow}` is rendered, it produces a different randomized effect.  There are a variety of attributes allowing you to control how the animation looks.\n\n#### `color`\nThe hex color of the snowflakes.  The default is `#ffffff`.  This attribute is ignored if `src` is specified.\n\n#### `count` (formerly `flakes`)\nSpecifies the number of snowflakes in the animation. The default is `3`.\n\n#### `height`\nThe height of the wrapping container.  If unspecified, will size automatically to fit the contents within.\n\n#### `min-opacity` and `max-opacity`\nControls the random opacity of the snowflakes in the animation.  Each snowflake will be randomly assigned an opacity in this range.  `1.0` is fully opaque and '0.0` is fully transparent.  The minimum opacity can not fall below `0.2`.  The default is `0.5` to `0.9` respectively.\n\n#### `min-size` and `max-size`\nAllow you to control the size, in pixels, of the snowflakes in the animation.  Each snowflake will be randomly sized within this range.  The defaults are `6` and `18` respectively.  \n\n#### `min-speed` and `max-speed`\nControls the minimum (fastest) and maximum (slowest) speed, in seconds, at which the snowflakes fall.  The defaults are `3` and `8` seconds respectively.\n\n#### `rotate`\nIf an image `src` is supplied and this boolean attribute is provided, causes the snowflakes to rotate randomly as they approach the bottom of the container.  The default is disabled/no rotation and is ignored if an image is not specified.\n\n#### `spread`\nThe distance, as a percent of the parent container's total width, the snowflake can travel horizontally from its starting position.  The higher this value the more angle the snowflakes will have as they fall.  Smaller values equal straighter lines.  The default is `20`%.\n\n#### `src`\nApply an image to each flake. When present, disables the background `color` fill on the flakes and applies the image to the background of each flake.\n\n#### `time`\nThe overall speed, in seconds, of initial dispersal.  The snowflakes will appear sometime between the moment the email loads to this time.","excerpt":"Ambient animation for Webkit-powered email clients.","slug":"snow","type":"basic","title":"Snow"}

Snow

Ambient animation for Webkit-powered email clients.

The `{snow}` Helper makes it easy to add an ambient falling snow special effect to your emails. The technique for this special effect was introduced in FreshInbox's [Ambient Animations in Email: Snow and Stars](http://freshinbox.com/blog/ambient-animations-in-email-snow-and-stars/) tutorial. Inkcite's implementation adds a variety of powerful customization features. ## Usage [block:code] { "codes": [ { "code": "{snow}\n image (recommended) or content that will have falling snow\n animated over it.\n{/snow}", "language": "html", "name": "source.html" } ] } [/block] [block:callout] { "type": "warning", "title": "Note!", "body": "This special effect is currently only supported in Webkit-powered email clients. You can, however, preview it in all modern browsers while developing your email. If Inkcite generates a web-hosted version of the email, the animation will be enabled for all modern browsers." } [/block] ## Parameters Each time the `{snow}` is rendered, it produces a different randomized effect. There are a variety of attributes allowing you to control how the animation looks. #### `color` The hex color of the snowflakes. The default is `#ffffff`. This attribute is ignored if `src` is specified. #### `count` (formerly `flakes`) Specifies the number of snowflakes in the animation. The default is `3`. #### `height` The height of the wrapping container. If unspecified, will size automatically to fit the contents within. #### `min-opacity` and `max-opacity` Controls the random opacity of the snowflakes in the animation. Each snowflake will be randomly assigned an opacity in this range. `1.0` is fully opaque and '0.0` is fully transparent. The minimum opacity can not fall below `0.2`. The default is `0.5` to `0.9` respectively. #### `min-size` and `max-size` Allow you to control the size, in pixels, of the snowflakes in the animation. Each snowflake will be randomly sized within this range. The defaults are `6` and `18` respectively. #### `min-speed` and `max-speed` Controls the minimum (fastest) and maximum (slowest) speed, in seconds, at which the snowflakes fall. The defaults are `3` and `8` seconds respectively. #### `rotate` If an image `src` is supplied and this boolean attribute is provided, causes the snowflakes to rotate randomly as they approach the bottom of the container. The default is disabled/no rotation and is ignored if an image is not specified. #### `spread` The distance, as a percent of the parent container's total width, the snowflake can travel horizontally from its starting position. The higher this value the more angle the snowflakes will have as they fall. Smaller values equal straighter lines. The default is `20`%. #### `src` Apply an image to each flake. When present, disables the background `color` fill on the flakes and applies the image to the background of each flake. #### `time` The overall speed, in seconds, of initial dispersal. The snowflakes will appear sometime between the moment the email loads to this time.