Skip to content

Instantly share code, notes, and snippets.

@seaside98

seaside98/ChatSkins.js

Created March 4, 2014 03:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save seaside98/9339949 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save seaside98/9339949 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ChatSkins.js
/* Fall Skin - by Seaside98
Winter Skin - by Nxtstep101
JavaScript - by Seaside98
Version 2.2.1
Change Log:
1.0.0 - Fall skin and script
2.0.0 - Winter skin and rewrite of script
2.1.0 - Fixed css loading problems
2.2.0 - Added cookies
2.2.1 - Winter skin is no longer default */
// Set initial skin
setTimeout(function() {
if($.cookie('skinType')=='normal') {
goNormal();
} else if($.cookie('skinType')=='fall') {
goFall();
} else if($.cookie('skinType')=='winter') {
goWinter();
}
}, 1000);
console.log("Chat skins intitialized.");
inlineAlert("Commands: /fall, /winter, /normal, /more, /less");
$('.ChatWindow').attr('id','ChatWindow');
// Variable delcarations
var fallCss = '<link href="http://lmbtest.wikia.com/index.php?title=MediaWiki:Fall.css&action=raw&ctype=text/css" rel="stylesheet" type="text/css" id="ChatSkins"/>';
var winterCss = '<link href="http://lmbtest.wikia.com/index.php?title=MediaWiki:Winter.css&action=raw&ctype=text/css" rel="stylesheet" type="text/css" id="ChatSkins"/>';
var skinType = 'normal';
var snowLeft = 0;
var snowflakes;
var totalSnow = 0;
var defaultSnow = 0;
// Chat commands
$('#Write textarea').keydown(function(e) {
if( $('#Write textarea').val() == "/more" && e.keyCode == 13 && skinType != 'normal' ) {
unKey(this);
handleSnow(true);
} else if( $('#Write textarea').val() == "/less" && e.keyCode == 13 && skinType != 'normal' ) {
unKey(this);
handleSnow(false);
} else if( $('#Write textarea').val() == "/fall" && e.keyCode == 13 ) {
unKey(this);
if(skinType != 'fall') {
goFall();
} else {
goNormal();
}
} else if( $('#Write textarea').val() == "/normal" && e.keyCode == 13 ) {
unKey(this);
goNormal();
} else if( $('#Write textarea').val() == "/winter" && e.keyCode == 13 ) {
unKey(this);
if(skinType != 'winter') {
goWinter();
} else {
goNormal();
}
}
});
// Prevent message from sending
function unKey(that) {
$(that).unbind('keypress').val('');
}
// Inline alerts
function inlineAlert(text) {
mainRoom.model.chats.add(new models.InlineAlert( {text:(text)} ));
}
// Create initial snow
function createSnow(number) {
snowflakes = new Snowflakes('ChatWindow', 'snowflakesContainer');
if(!$.cookie('skinClear')) {
snowflakes.create(number);
totalSnow = number;
}
console.log("There are a total of "+totalSnow+" objects.");
}
// Add or remove snow
function handleSnow(addSub) {
if(addSub) {
snowflakes.moreSnow(defaultSnow);
totalSnow+=defaultSnow;
$.cookie('skinClear',null);
} else {
if(totalSnow == defaultSnow) {
snowflakes.lessSnow(defaultSnow);
totalSnow = 0;
$.cookie('skinClear','0',{expires: 5});
} else {
snowflakes.lessSnow(totalSnow-defaultSnow);
totalSnow = defaultSnow;
}
}
console.log("There are a total of "+totalSnow+" objects.");
}
// Switch to normal skin
function goNormal() {
skinType = 'normal';
totalSnow = 0;
defaultSnow = 0;
$('#skinBackground').remove();
$('#ChatSkins').remove();
$.cookie('skinType','normal',{expires: 5});
}
// Switch to fall skin
function goFall() {
clearOld();
skinType = 'fall';
defaultSnow = 20;
snowLeft = 25;
$('.ChatWindow').prepend('<div id="skinBackground"><div class="fallHover"></div><div id="snowflakesContainer"></div></div>');
$('head').append(fallCss);
createSnow(20);
$.cookie('skinType','fall',{expires: 5});
}
// Switch to winter skin
function goWinter() {
clearOld();
skinType = 'winter';
defaultSnow = 50;
snowLeft = 0;
$('.ChatWindow').prepend('<div id="skinBackground"><div id="snowflakesContainer"></div></div>');
$('head').append(winterCss);
createSnow(50);
$.cookie('skinType','winter',{expires: 5});
}
// Reset page for new skin
function clearOld() {
totalSnow = 0;
$('#skinBackground').remove();
$('#ChatSkins').remove();
}
// Falling Things
// https://github.com/dmolsen/CSS3-Snowflakes
function Snowflakes(_pageContainer, _snowflakesContainer) {
this.snowID = 1;
this.sizes = new Array('', 'snowflakeSizeSM', 'snowflakeSizeMED', 'snowflakeSizeLRG');
this.speeds = new Array('', 'snowflakeSpeedSlow', 'snowflakeSpeedMed', 'snowflakeSpeedFast');
this.opacities = new Array('', 'snowflakeOpacityFaint', 'snowflakeOpacityLight', 'snowflakeOpacityDark');
this.delays = new Array('', 'snowflakeDelay1', 'snowflakeDelay2', 'snowflakeDelay3', 'snowflakeDelay4', 'snowflakeDelay5', 'snowflakeDelay6');
this.pageContainer = document.getElementById(_pageContainer);
this.snowflakesContainer = document.getElementById(_snowflakesContainer);
}
Snowflakes.prototype.randomFromTo = function (from, to) {
return Math.floor(Math.random() * (to - from + 1) + from);
};
Snowflakes.prototype.findKeyframeAnimation = function (a) {
var ss = document.styleSheets;
for (var i = ss.length - 1; i >= 0; i--) {
try {
var s = ss[i],
rs = s.cssRules ? s.cssRules : s.rules ? s.rules : [];
for (var j = rs.length - 1; j >= 0; j--) {
if ((rs[j].type === window.CSSRule.WEBKIT_KEYFRAMES_RULE || rs[j].type === window.CSSRule.MOZ_KEYFRAMES_RULE) && rs[j].name == a) {
return rs[j];
}
}
} catch (e) {
}
}
return null;
};
Snowflakes.prototype.updateKeyframeHeight = function() {
if (keyframes = this.findKeyframeAnimation("falling")) {
var height = this.pageContainer.offsetHeight;
if ((window.innerHeight) > height) {
height = window.innerHeight;
}
if (keyframes.cssText.match(new RegExp('webkit'))) {
var newRule = "100% { -webkit-transform: translate3d(0,"+height+"px,0) rotate(360deg); }";
} else if (keyframes.cssText.match(new RegExp('moz'))) {
var newRule = "-moz-transform: translate(0,"+height+"px) rotate(360deg);";
} else {
var newRule = "transform: translate(0,"+height+"px) rotate(360deg);";
}
if (navigator.userAgent.indexOf("Firefox")!=-1) { keyframes.appendRule(newRule); } else { keyframes.insertRule(newRule); }
}
};
Snowflakes.prototype.create = Snowflakes.prototype.moreSnow = function (snowflakeCount) {
var i = 0;
this.updateKeyframeHeight();
while (i < snowflakeCount) {
var snowflake = document.createElement('i');
var size = this.sizes[this.randomFromTo(0, this.sizes.length - 1)];
var speed = this.speeds[this.randomFromTo(0, this.speeds.length - 1)];
var opacity = this.opacities[this.randomFromTo(0, this.opacities.length - 1)];
var delay = this.delays[this.randomFromTo(0, this.delays.length - 1)];
snowflake.setAttribute('id', 'snowId' + this.snowID);
snowflake.setAttribute('class', 'snowflake ' + size + ' ' + speed + ' ' + opacity + ' ' + delay);
snowflake.setAttribute('style', 'left: ' + this.randomFromTo(snowLeft, 100) + '%;');
this.snowflakesContainer.appendChild(snowflake);
i++;
this.snowID++;
}
};
Snowflakes.prototype.lessSnow = function(snowflakeCount) {
if (this.snowflakesContainer.childNodes.length >= snowflakeCount) {
var snowRemoveCount = 0;
while (snowRemoveCount < snowflakeCount) {
this.snowflakesContainer.removeChild(this.snowflakesContainer.lastChild);
snowRemoveCount++;
}
}
};
Raw
Fall.css
#WikiaPage {
background-color: transparent !important;
}
.ping {
color: red !important;
}
.WikiaPage {
background-color: transparent;
}
.client-js {
height: 100%;
}
.ChatWindow {
background-image: url(http://images.wikia.com/lmbtest/images/e/ee/Fall_Tree_Neon.png);
background-repeat: no-repeat;
background-size: contain;
background-color: black;
background-position: center;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
overflow: hidden;
height: 100%;
}
#skinBackground {
position: absolute;
height: 100%;
width: 100%;
margin-top: -10px;
background-color: rgba(0, 0, 0, 0.3);
}
.fallHover {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
background-image: url(http://images3.wikia.nocookie.net/lmbtest/images/f/f0/Fall_Tree.png);
opacity: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
position: relative;
z-index: -1;
}
.ChatWindow:hover .fallHover {
opacity: 1;
}
#snowflakesContainer {
top: 0px;
position: absolute;
width: 100%;
}
.snowflake {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
position: absolute;
display: inline-block;
background-image: url(http://images.wikia.com/lmbtest/images/b/b8/Fall_Leaf_Neon.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
opacity: 0.5;
width: 4%;
height: 0;
padding-bottom: 4%;
z-index: -1;
border-radius: 50%;
-webkit-border-radius: 50%;
-webkit-transform-origin: left -20px;
-webkit-animation: falling 7.7s linear 2s infinite;
transform-origin: left -20px;
animation: falling 7.7s linear 2s infinite;
}
.ChatWindow:hover .snowflake {
background-image: url(http://images.wikia.com/lmbtest/images/6/63/Fall_Leaf.png);
}
#ChatHeader {
border-radius: 20px 20px 0 !important;
background-color: rgba(253, 109, 42, 0.2) !important;
background-image: none !important;
pointer-events: all;
transition: background .4s;
-moz-transition: background .4s;
-webkit-transition: background .4s;
-ms-transition: background .4s;
}
.Chat .you {
background: none;
}
.Chat .inline-alert {
text-shadow: 0 0 5px black;
}
#Write .message {
background: rgba(253, 109, 42, 0.2) !important;
border: none !important;
transition: background .4s;
-moz-transition: background .4s;
-webkit-transition: background .4s;
-ms-transition: background .4s;
}
#Write .message:hover,#ChatHeader:hover {
background: rgba(253, 109, 42, 0.4) !important;
}
#ChatHeader a:not(#partyMenuButton),#partyMenuButton>span,#Rail .User,#Rail .public,#UserStatsMenu .actions li, #chatOptionsButton {
transition: background .4s;
-moz-transition: background .4s;
-webkit-transition: background .4s;
-ms-transition: background .4s;
}
#ChatHeader .public.wordmark a#partyMenuButton:hover {
background: none !important;
}
#ChatHeader a:not(#partyMenuButton):hover,#partyMenuButton>span:hover,#partyMenuButton.active>span,#partyMenu,#Rail .User:hover,#Rail .public:hover,#UserStatsMenu .actions li:hover, #chatOptionsButton:hover {
background: rgba(253, 76, 42, 0.4) !important;
}
#Rail .selected, .ChatWindow #WikiaPage #Rail .private {
background: rgba(253, 109, 42, 0.2) !important;
}
#Rail .selected:hover,#UserStatsMenu {
background: rgba(253, 109, 42, 0.4) !important;
}
#UserStatsMenu {
border: none !important;
border-radius: 20px !important;
}
#ChatHeader span,#ChatHeader a,#UserStatsMenu li,#UserStatsMenu a,#Rail,.Chat span,#Write textarea {
color: white !important;
text-shadow: 0 0 5px black;
}
#Write input {
border-radius: 0 20px 20px 0 !important;
}
#partyMenu {
border-radius: 0 0 20px 20px;
}
#Write .message {
border-radius: 20px !important;
padding: 0 20px;
}
.ChatWindow #Rail .private {
background-color: transparent !important;
background-image: none !important;
}
@keyframes falling {
0% {
transform: translate3d(0, 0, 0) rotate(0deg);
}
100% {
transform: translate3d(0, 1000px, 0) rotate(360deg);
}
}
@-webkit-keyframes falling {
0% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
}
100% {
-webkit-transform: translate3d(0, 1000px, 0) rotate(360deg);
}
}
.snowflakeSizeLRG {
padding-bottom: 4%;
width: 4%;
-webkit-transform-origin: left -30px;
transform-origin: left -30px;
}
.snowflakeSizeMED {
padding-bottom: 3%;
width: 3%;
-webkit-transform-origin: left -30px;
transform-origin: left -30px;
}
.snowflakeSizeSM {
padding-bottom: 2%;
width: 2%;
-webkit-transform-origin: -30px 0;
transform-origin: left -30px;
}
.snowflakeSpeedSlow {
-webkit-animation-duration: 7.1s;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: -10px -20px;
animation-duration: 7.1s;
animation-iteration-count: infinite;
transform-origin: -10px -20px;
}
.snowflakeSpeedMed {
-webkit-animation-duration: 6.6s;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: -10px -20px;
animation-duration: 6.6s;
animation-iteration-count: 12;
transform-origin: -10px -20px;
}
.snowflakeSpeedFast {
-webkit-animation-duration: 5.9s;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: -10px -20px;
animation-duration: 5.9s;
animation-iteration-count: 12;
transform-origin: -10px -20px;
}
.snowflakeOpacityFaint {
opacity: 0.1;
}
.snowflakeOpacityLight {
opacity: 0.3;
}
.snowflakeOpacityDark {
opacity: 0.7;
}
.snowflakeDelay1 {
-webkit-animation-delay: 3.4s;
animation-delay: 3.4s;
}
.snowflakeDelay2 {
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.snowflakeDelay3 {
-webkit-animation-delay: 4.6s;
animation-delay: 4.6s;
}
.snowflakeDelay4 {
-webkit-animation-delay: 6.3s;
animation-delay: 6.3s;
}
.snowflakeDelay5 {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.snowflakeDelay6 {
-webkit-animation-delay: 8.1s;
animation-delay: 8.1s;
}
.snowflakeSizeLRG.snowflakeDelay2 {
-webkit-animation-timing-function: ease-in-out;
}
.snowflakeSizeLRG.snowflakeDelay1 {
-webkit-animation-timing-function: ease-out;
}
.snowflakeSizeLRG.snowflakeDelay2 {
animation-timing-function: ease-in-out;
}
.snowflakeSizeLRG.snowflakeDelay1 {
animation-timing-function: ease-out;
}
.snowflakeSpeedMed.snowflakeDelay2 {
opacity: 0.5;
}
.snowflakeSpeedMed.snowflakeDelay1 {
opacity: 0.3;
}
.snowflakeSpeedFast.snowflakeDelay2 {
opacity: 0.7;
}
.snowflakeSpeedFast.snowflakeDelay1 {
opacity: 0.6;
-webkit-animation-timing-function: ease-in;
-webkit-transform-origin: left 10px;
animation-timing-function: ease-in;
transform-origin: left 10px;
}
.snowflakeSpeedSlow {
opacity: 0.8;
}
Raw
Winter.css
#ChatHeader .User {
border: none;
width: auto;
padding-top: 8px;
}
#ChatHeader .public.wordmark a {
display: inline-block;
height: 40px;
margin-left: 7px;
}
.ChatWindow #Rail .selected, .ChatWindow #UserStatsMenu {
box-shadow: none;
-webkit-box-shadow: none;
}
.ChatWindow #Rail .public {
cursor: pointer;
padding-bottom: 10px;
}
#ChatHeader .User img {
display: none;
}
#ChatHeader, #WikiaPage {
border: none;
}
#UserStatsMenu .info, #WikiaPage {
background: transparent;
}
#ChatHeader {
background: url(http://static4.wikia.nocookie.net/__cb20131130211408/lmbtest/images/9/9e/Christmaslights2.gif) !important;
background-size: auto 100% !important;
background-repeat: repeat-x !important;
margin-left: 0;
margin-right: 0;
}
#ChatHeader .public.wordmark a, #Write .wikia-button {
background: -webkit-linear-gradient(#162C5E, #2C4E95, #3E69BF) !important;
background: -moz-linear-gradient(#162C5E, #2C4E95, #3E69BF) !important;
background: linear-gradient(#162C5E, #2C4E95, #3E69BF) !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#162C5E', endColorstr='#3E69BF',GradientType=0 ) !important;
opacity: .5;
padding-left: 5px;
padding-right: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition: ease-in-out .5s;
-moz-transition: ease-in-out .5s;
transition: ease-in-out .5s;
}
#Write .wikia-button {
margin-right: 30px;
margin-bottom: 2px;
border: 0;
}
#ChatHeader .public.wordmark a:hover, #Write .wikia-button:hover {
background: -webkit-linear-gradient(#162C5E, #2C4E95, #3E69BF) !important;
background: -moz-linear-gradient(#162C5E, #2C4E95, #3E69BF) !important;
background: linear-gradient(#162C5E, #2C4E95, #3E69BF) !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#162C5E', endColorstr='#3E69BF',GradientType=0 ) !important;
opacity: 1;
}
.User .username {
color: #fff;
}
.Chat li, #chatOptionsButton {
background-color: rgba(0,0,0,0) !important;
}
#chatOptionsButton {
width: auto !important;
font-size: 100% !important;
font-weight: bold;
padding: 5px 0 !important;
}
.ChatWindow .Chat {
border: 0;
}
.Chat .message, .Chat .username, #UserStatsMenu li, #UserStatsMenu .label, #chatOptionsButton, .username, #pingspan, .ChatWindow #UserStatsMenu .edits, .ChatWindow #UserStatsMenu .since, .ChatWindow #UserStatsMenu li span {
color: #fff !important;
text-shadow: 0 0 5px #fff;
}
.Chat .inline-alert, .Chat .time {
color: whitesmoke;
text-shadow: 0 0 7px #fff;
}
.ChatWindow #Rail .public {
background: #132759 !important;
}
.ChatWindow #Rail .User {
background: rgba(0, 0, 0, 0) !important;
-webkit-transition: ease-in-out .75s;
-moz-transition: ease-in-out .75s;
transition: ease-in-out .75s;
}
.ChatWindow #Rail .User:hover, #chatOptionsButton:hover {
background: -webkit-linear-gradient(#132759, #3967BD, #132759) !important;
background: -moz-linear-gradient(#132759, #3967BD, #132759) !important;
background: linear-gradient(#132759, #3967BD, #132759) !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#132759', endColorstr='#132759',GradientType=0 ) !important;
opacity: 1;
}
#Rail, #UserStatsMenu {
background: -webkit-linear-gradient(rgba(19,39,89,.5), rgba(57,103,189,.5), rgba(19,39,89,.5)) !important;
background: -moz-linear-gradient(rgba(19,39,89,.5), rgba(57,103,189,.5), rgba(19,39,89,.5)) !important;
background: -webkit-linear-gradient(rgba(19,39,89,.5), rgba(57,103,189,.5), rgba(19,39,89,.5)) !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#132759', endColorstr='#132759',GradientType=0 ) !important;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#Rail {
overflow-x: hidden;
}
.Write [name="message"] {
color: #fff;
}
.ChatWindow #UserStatsMenu .actions {
padding: 0;
}
.ChatWindow #UserStatsMenu {
border: 0;
box-shadow: none;
-webkit-box-shadow: none;
}
.ChatWindow #Write .message {
background: rgba(254,254,254,.2);
border: 0;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
padding: 10px;
-webkit-transition: ease-in .75s;
-moz-transition: ease-in .75s;
transition: ease-in .75s;
width: 100%;
}
.ChatWindow #Write .message:hover {
background: rgba(254,254,254,.5);
}
.ChatWindow #Rail .private {
background: #132759 !important;
}
.ChatWindow #Write > img, .ChatWindow .Chat .avatar, .ChatWindow #Rail .User > img, .ChatWindow #UserStatsMenu .info > img {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border: 0;
}
.Chat a {
display: inline-block;
color: #fff;
text-decoration: underline;
}
#pingspan {
color: #ccc;
}
.splotch {
padding: 2px 4px;
border: 0;
}
@-webkit-keyframes shakey {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
@keyframes shakey {
0% { transform: translate(2px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(0px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(2px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(2px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.Chat a:hover, .ChatWindow #UserStatsMenu .actions li:hover {
background: transparent;
-webkit-animation-name: shakey;
-webkit-animation-duration: 0.8s;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-name: shakey;
animation-duration: 0.8s;
transform-origin:50% 50%;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#skinBackground {
background-image: url(http://img.wallbeam.com/36processed/lovely%20winter%20night%20hd%20wallpaper.jpg);
background-repeat: no-repeat;
background-size: cover;
background-color: #0a0706;
background-position: center;
overflow: hidden;
margin-top: -10px;
height: 100%;
width: 100%;
position: absolute;
}
#snowflakesContainer {
top: 0px;
position: absolute;
width: 100%;
z-index: 20;
}
.snowflake {
position: absolute;
display: inline-block;
background-color: white;
opacity: 0.5;
width: 7px;
height: 7px;
z-index: -1;
border-radius: 50%;
-webkit-transform-origin: left -20px;
-webkit-animation: falling 7.7s linear 2s infinite;
transform-origin: left -20px;
animation: falling 7.7s linear 2s infinite;
}
@keyframes falling {
0% {
transform: translate3d(0, 0, 0) rotate(0deg);
}
100% {
transform: translate3d(0, 1000px, 0) rotate(360deg);
}
}
@-webkit-keyframes falling {
0% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
}
100% {
-webkit-transform: translate3d(0, 1000px, 0) rotate(360deg);
}
}
.snowflakeSizeLRG {
height: 11px;
width: 11px;
-webkit-transform-origin: left -30px;
transform-origin: left -30px;
}
.snowflakeSizeMED {
height: 9px;
width: 9px;
-webkit-transform-origin: left -30px;
transform-origin: left -30px;
}
.snowflakeSizeSM {
height: 5px;
width: 5px;
-webkit-transform-origin: -30px 0;
transform-origin: left -30px;
}
.snowflakeSpeedSlow {
-webkit-animation-duration: 7.1s;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: -10px -20px;
animation-duration: 7.1s;
animation-iteration-count: infinite;
transform-origin: -10px -20px;
}
.snowflakeSpeedMed {
-webkit-animation-duration: 6.6s;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: -10px -20px;
animation-duration: 6.6s;
animation-iteration-count: 12;
transform-origin: -10px -20px;
}
.snowflakeSpeedFast {
-webkit-animation-duration: 5.9s;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: -10px -20px;
animation-duration: 5.9s;
animation-iteration-count: 12;
transform-origin: -10px -20px;
}
.snowflakeOpacityFaint {
opacity: 0.1;
}
.snowflakeOpacityLight {
opacity: 0.3;
}
.snowflakeOpacityDark {
opacity: 0.7;
}
.snowflakeDelay1 {
-webkit-animation-delay: 3.4s;
animation-delay: 3.4s;
}
.snowflakeDelay2 {
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.snowflakeDelay3 {
-webkit-animation-delay: 4.6s;
animation-delay: 4.6s;
}
.snowflakeDelay4 {
-webkit-animation-delay: 6.3s;
animation-delay: 6.3s;
}
.snowflakeDelay5 {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.snowflakeDelay6 {
-webkit-animation-delay: 8.1s;
animation-delay: 8.1s;
}
.snowflakeSizeLRG.snowflakeDelay2 {
-webkit-animation-timing-function: ease-in-out;
}
.snowflakeSizeLRG.snowflakeDelay1 {
-webkit-animation-timing-function: ease-out;
}
.snowflakeSizeLRG.snowflakeDelay2 {
animation-timing-function: ease-in-out;
}
.snowflakeSizeLRG.snowflakeDelay1 {
animation-timing-function: ease-out;
}
.snowflakeSpeedMed.snowflakeDelay2 {
opacity: 0.5;
}
.snowflakeSpeedMed.snowflakeDelay1 {
opacity: 0.3;
}
.snowflakeSpeedFast.snowflakeDelay2 {
opacity: 0.7;
}
.snowflakeSpeedFast.snowflakeDelay1 {
opacity: 0.6;
-webkit-animation-timing-function: ease-in;
-webkit-transform-origin: left 10px;
animation-timing-function: ease-in;
transform-origin: left 10px;
}
.snowflakeSpeedSlow {
opacity: 0.8;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment