JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<div id="clickme">sdsdasda</div>
<div id="book">sdsdadsfsdfsdfsdfsdfsda</div>

CSS

body {
    margin:0;
    padding:0;
}
.topHeader {
    background: url("http://pcvector.net/templates/vector/images/background.png") #000000;
    border: 2px solid #229CFF;
    display: block;
    font-family: tahoma;
    font-size: 12px;
    line-height: 10px;
    padding: 10px;
    position: fixed;
    right: -2px;
    text-align: right;
    top: 10px;
    z-index: 1000;
    border-radius:6px 0 0 6px;
    -moz-border-radius:6px 0 0 6px;
    -webkit-border-radius:6px 0 0 6px;
    animation-name: back;
    animation-delay: 0s;
    animation-duration: 2s;
    animation-timing-function: linear;
    -moz-animation-name: back;
    -moz-animation-delay: 0s;
    -moz-animation-duration: 2s;
    -moz-animation-timing-function: linear;
    -webkit-animation-name: back;
    -webkit-animation-delay: 0s;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
}
@keyframes back {
    from {
        right:-172px;
    }
    to {
        right:-2px;
    }
}
@-moz-keyframes back {
    from {
        right:-172px;
    }
    to {
        right:-2px;
    }
}
@-webkit-keyframes back {
    from {
        right:-172px;
    }
    to {
        right:-2px;
    }
}
.topHeader a.backArticle {
    color: #FF8801;
    font-weight: bold;
    margin-right: 10px;
    text-decoration: none;
}
.topHeader a.backArticle:hover {
    color: #FFFFFF;
}
.addshare {
    position: fixed;
    top: 60px;
    left:10px;
    z-index: 500;
    border:1px solid #c2c2c2;
}
.addshare a {
    text-align:center;
}
.addthis_button_facebook_like {
    margin: 0 0 0 6px;
}
#addshare {
    text-align:center;
    background:#ff0000;
    border-radius:20px;
    z-index:501;
    width:13px;
    ;
    color:#fff;
    position:absolute;
    cursor:pointer;
    margin: -18px 0 0 58px;
    padding: 0 3px 3px;
}

JavaScript

snow_intensive = 400;
snow_speed = 20000;
snow_src = new Array('sneg1.gif', 'sneg2.gif', 'sneg3.gif', 'sneg4.png');

$(document).ready(snow_start);

function snow_start() {
    snow_id = 1;
    snow_y = $("#container").height() - 30;
    setInterval(function () {
        snow_x = Math.random() * document.body.offsetWidth - 100;
        snow_img = (snow_src instanceof Array ? snow_src[Math.floor(Math.random() * snow_src.length)] : snow_src);
        snow_elem = '<img class="png" id="snow' + snow_id + '" style="position:absolute; left:' + snow_x + 'px; top:0;z-index:10000" src="' + snow_img + '">';
        $("#container").append(snow_elem);
        snow_move(snow_id);
        snow_id++;
    }, snow_intensive);
}

function snow_move(id) {
    $('#snow' + id).animate({
        top: snow_y,
        left: "+=" + Math.random() * 100
    }, snow_speed, function () {
        $(this).empty().remove();
    });
}