Skip to content

Instantly share code, notes, and snippets.

@RoootTheFox
Last active December 15, 2021 00:05
Show Gist options
  • Save RoootTheFox/c19e13fb0322afc68eeb896b5ce7915f to your computer and use it in GitHub Desktop.
Save RoootTheFox/c19e13fb0322afc68eeb896b5ce7915f to your computer and use it in GitHub Desktop.
vanilla discord snow fall (for copy pasting into devtools, https://cople.github.io/Snowfall.js/)
// load style
var tmp_head = document.getElementsByTagName('head')[0];
var tmp_style = document.createElement('style');
tmp_style.innerHTML = '.snowflake { \
position: absolute; \
color: #fff; \
line-height: 1; \
pointer-events: none; \
-webkit-user-select: none; \
-moz-user-select: none; \
-ms-user-select: none; \
user-select: none; \
-webkit-font-smoothing: antialiased; \
-moz-osx-font-smoothing: grayscale; \
} \
.snowflake-solid { \
-webkit-border-radius: 50%; \
-moz-border-radius: 50%; \
border-radius: 50%; \
background: #fff; \
}';
// add stylesheet
tmp_head.appendChild(tmp_style);
/* SNOWFALL SCRIPT */
/*!
* Snowfall.js v1.1 (http://cople.github.io/Snowfall.js/)
*/
(function(window, document, undefined) {
"use strict";
var winWidth = window.innerWidth,
winHeight = window.innerHeight,
defaultOptions = {
minSize: 10,
maxSize: 30,
type: "text",
content: "&#10052",
fadeOut: true,
autoplay: true,
interval: 200
};
function cssPrefix(propertyName) {
var capitalizePropertyName = propertyName.charAt(0).toUpperCase() + propertyName.slice(1),
tempDiv = document.createElement("div"),
style = tempDiv.style,
vendorPrefixes = ["Webkit", "Moz", "ms", "O"];
if (propertyName in style) return propertyName;
for (var i = 0, l = vendorPrefixes.length; i < l; i++) {
var name = vendorPrefixes[i] + capitalizePropertyName;
if (name in style) return name;
};
return null;
};
var cssPrefixedNames = {
"transform": cssPrefix("transform"),
"transition": cssPrefix("transition")
},
transitionendEventName = {
"WebkitTransition": "webkitTransitionEnd",
"OTransition": "oTransitionEnd",
"Moztransition": "transitionend",
"transition": "transitionend"
}[cssPrefixedNames.transition];
function random(min, max, deviation) {
if (deviation) {
deviation *= max;
max = max + deviation;
min = max - deviation;
} else {
min = min || 0;
};
return parseInt(Math.random() * (max - min + 1) + min);
};
function extend(target, source) {
for (var prop in source) {
target[prop] = source[prop];
};
return target;
};
function setStyle(element, rules) {
for (var name in rules) {
element.style[cssPrefixedNames[name] || name] = rules[name];
};
};
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.mozHidden !== "undefined") {
hidden = "mozHidden";
visibilityChange = "mozvisibilitychange";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
};
window.addEventListener("resize", function() {
winHeight = window.innerHeight;
winWidth = window.innerWidth;
}, false);
function Snowfall(newOptions) {
var _ = this,
queue = [],
options = defaultOptions,
$snowfield = document.createElement("div"),
isImage, cntLength, $snowflake, timer;
_.config = function(newOptions) {
extend(options, newOptions);
isImage = options.type == "image";
cntLength = options.content.length;
$snowflake = isImage ? new Image() : document.createElement("div");
$snowflake.className = "snowflake snowflake-" + options.type;
$snowflake.dataset.type = options.type;
};
_.config(newOptions);
function Snowflake() {
var _$snowflake = $snowflake.cloneNode();
if (options.type != "solid") {
_$snowflake[isImage ? "src" : "innerHTML"] = typeof options.content == "string" ? options.content : options.content[cntLength == 0 ? 0 : Math.floor(Math.random() * cntLength)];
};
return _$snowflake;
};
function snowAnimate() {
var size = random(options.minSize, options.maxSize),
top = -2 * size,
left = random(0, winWidth - size),
opacity = random(5, 10) / 10,
angle = random(null, winHeight * 0.8, 1),
translateX = random(-100, 100),
translateY = winHeight + size * 2,
duration = random(null, winHeight * 20, 0.2),
_$snowflake;
if (queue.length) {
_$snowflake = queue.shift();
if (_$snowflake.dataset.type != options.type) _$snowflake = new Snowflake();
} else {
_$snowflake = new Snowflake();
};
var styleRules = {
"top": top + "px",
"left": left + "px",
"opacity": opacity,
"transform": "none",
"transition": duration + "ms linear"
};
switch (options.type) {
case "solid":
styleRules.width = styleRules.height = size + "px";
break;
case "text":
styleRules["font-size"] = size + "px";
break;
case "image":
styleRules.width = size + "px";
break;
};
setStyle(_$snowflake, styleRules);
$snowfield.appendChild(_$snowflake);
setTimeout(function() {
setStyle(_$snowflake, {
"transform": "translate(" + translateX + "px," + translateY + "px) rotate(" + angle + "deg)",
"opacity": options.fadeOut ? 0 : opacity
});
}, 100);
};
_.playing = 0;
_.play = function() {
if (_.playing) return;
timer = setInterval(snowAnimate, options.interval);
_.playing = 1;
};
_.stop = function() {
if (!_.playing) return;
clearInterval(timer);
timer = null;
_.playing = 0;
};
document.addEventListener(visibilityChange, function() {
document[hidden] ? _.stop() : _.play();
}, false);
$snowfield.addEventListener(transitionendEventName, function(e) {
var snowflake = e.target || e.srcElement;
$snowfield.removeChild(snowflake);
queue.push(snowflake);
}, false);
$snowfield.className = "snowfield";
document.body.appendChild($snowfield);
options.autoplay && _.play();
return _;
};
window.Snowfall = Snowfall;
})(window, document);
/* END OF SNOWFALL SCRIPT */
// start snow
var snow = new Snowfall();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment