Snowflake Script

Tags: css, snowflakes, profile, utility, customizable

Description:

I've seen a few of these, but thought I'd post my own variant. They're easy enough to customize, so I guess just use whichever is convenient.
The main way these scripts work is by utilizing CSS' innate animation tools.
It is also possible to create falling snowflakes that are text or symbols, rather than images. After the div class, simply put in your text or unicode character, and close the tag.

Note that these animations only work in browsers that support CSS animations, that is to say--most modern browsers. Pre-2012 browsers likely won't support this script, however.

Preview:

Code:

<!-- (c) Layout created by ケラモン (https://layouts.spacehey.com/layout?id=38839) --> <div class="snowflakes"> <div class="snowflake"><img src="URL"/></div> <div class="snowflake"><img src="URL"/></div> <div class="snowflake"><img src="URL"/></div> <div class="snowflake"><img src="URL"/></div> <div class="snowflake"><img src="URL"/></div> <div class="snowflake"><img src="URL"/></div> <div class="snowflake"><img src="URL"/></div> <div class="snowflake"><img src="URL"/></div> <div class="snowflake"><img src="URL"/></div> <div class="snowflake"><img src="URL"/></div> <div class="snowflake"><img src="URL"/></div> <div class="snowflake"><img src="URL"/></div> </div> <style> @-webkit-keyframes snowflakes-fall { 0% { top: -10% } 100% { top: 100% } } @-webkit-keyframes snowflakes-shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0) } 50% { -webkit-transform: translateX(80px); transform: translateX(80px) } } @keyframes snowflakes-fall { 0% { top: -10% } 100% { top: 100% } } @keyframes snowflakes-shake { 0%, 100% { transform: translateX(0) } 50% { transform: translateX(80px) } } .snowflake { position: fixed; top: -10%; z-index: 9999; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-animation-name: snowflakes-fall, snowflakes-shake; -webkit-animation-duration: 10s, 3s; -webkit-animation-timing-function: linear, ease-in-out; -webkit-animation-iteration-count: infinite, infinite; -webkit-animation-play-state: running, running; animation-name: snowflakes-fall, snowflakes-shake; animation-duration: 10s, 3s; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite; animation-play-state: running, running } .snowflake:nth-of-type(0) { left: 1%; -webkit-animation-delay: 0s, 0s; animation-delay: 0s, 0s } .snowflake:nth-of-type(1) { left: 10%; -webkit-animation-delay: 1s, 1s; animation-delay: 1s, 1s } .snowflake:nth-of-type(2) { left: 20%; -webkit-animation-delay: 6s, .5s; animation-delay: 6s, .5s } .snowflake:nth-of-type(3) { left: 30%; -webkit-animation-delay: 4s, 2s; animation-delay: 4s, 2s } .snowflake:nth-of-type(4) { left: 40%; -webkit-animation-delay: 2s, 2s; animation-delay: 2s, 2s } .snowflake:nth-of-type(5) { left: 50%; -webkit-animation-delay: 8s, 3s; animation-delay: 8s, 3s } .snowflake:nth-of-type(6) { left: 60%; -webkit-animation-delay: 6s, 2s; animation-delay: 6s, 2s } .snowflake:nth-of-type(7) { left: 70%; -webkit-animation-delay: 2.5s, 1s; animation-delay: 2.5s, 1s } .snowflake:nth-of-type(8) { left: 80%; -webkit-animation-delay: 1s, 0s; animation-delay: 1s, 0s } .snowflake:nth-of-type(9) { left: 90%; -webkit-animation-delay: 3s, 1.5s; animation-delay: 3s, 1.5s } .snowflake:nth-of-type(10) { left: 25%; -webkit-animation-delay: 2s, 0s; animation-delay: 2s, 0s } .snowflake:nth-of-type(11) { left: 65%; -webkit-animation-delay: 4s, 2.5s; animation-delay: 4s, 2.5s }</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.