Μετάβαση στο περιεχόμενο
JoeDer

Νιφάδες χωνιού

Recommended Posts

JoeDer

Με τον παρακάτω τρόπο μπορούμε να προσθέσουμε νιφάδες χωνιού.

Δημιουργούμε ένα νέο template στο core > global > global >

Ονομασία: js_christmas

Location: global

Group: Add to an existing group

Existing Group: global

Application: System

Και προσθέτουμε το παρακάτω περιεχόμενο:

<script>
$(document).ready(function(){
if (!$('html').hasClass("snow-done")) {
	
	$("body").append("<div class='snow'><i class='f-sF'></i></div>");
	
	var snowlist = $('.snow');
	for ( i = 0; i < 60;i++){
	      snowlist.find('.f-sF:first').clone().appendTo(snowlist);
	}

	$('html').addClass('snow-done');
                         
}
});
</script>

<style>

@-webkit-keyframes snow_1 {
    0% { transform: translate(-250px, 0); }
    100% { transform: translate(250px, calc(100vh + 970px)); }
}
@-webkit-keyframes snow_2 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(250px, calc(100vh + 970px)); }
}
@-webkit-keyframes snow_3 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(0, calc(100vh + 970px)); }
}
@keyframes snow_1 {
    0% { transform: translate(-250px, 0); }
    100% { transform: translate(250px, calc(100vh + 970px)); }
}
@keyframes snow_2 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(250px, calc(100vh + 970px)); }
}
@keyframes snow_3 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(0, calc(100vh + 970px)); }
}

.snow{
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	z-index: 2010;
	pointer-events: none;
}

/* snowflake */
.f-sF{
    position: absolute;
    background: #fff;
    border-radius: 50%;
    box-shadow: #000 0px 1px 2px;
}

	.f-sF:nth-child(3n+1) {
	    -webkit-animation: snow_1 8s linear infinite;
	    animation: snow_1 8s linear infinite
	}
	.f-sF:nth-child(3n+2) {
	    -webkit-animation: snow_2 8s 4s linear infinite;
	    animation: snow_2 8s 4s linear infinite
	}
	.f-sF:nth-child(3n+3) {
	    -webkit-animation: snow_3 8s 6s linear infinite;
	    animation: snow_3 8s 6s linear infinite
	}
	.f-sF:nth-child(1) {
	    left: 79%;
	    top: -210px;
	    width: 4px;
	    height: 5px;
	}
	.f-sF:nth-child(2) {
	    left: 17%;
	    top: -300px;
	    width: 6px;
	    height: 5px;
	}
	.f-sF:nth-child(3) {
	    left: 6%;
	    top: -40px;
	    width: 2px;
	    height: 5px;
	}
	.f-sF:nth-child(4) {
	    left: 35%;
	    top: -340px;
	    width: 3px;
	    height: 3px;
	}
	.f-sF:nth-child(5) {
	    left: 34%;
	    top: -280px;
	    width: 2px;
	    height: 5px;
	}
	.f-sF:nth-child(6) {
	    left: 9%;
	    top: -780px;
	    width: 1px;
	    height: 2px;
	}
	.f-sF:nth-child(7) {
	    left: 27%;
	    top: -340px;
	    width: 2px;
	    height: 1px;
	}
	.f-sF:nth-child(8) {
	    left: 92%;
	    top: -310px;
	    width: 6px;
	    height: 4px;
	}
	.f-sF:nth-child(9) {
	    left: 21%;
	    top: -100px;
	    width: 5px;
	    height: 1px;
	}
	.f-sF:nth-child(10) {
	    left: 30%;
	    top: -690px;
	    width: 3px;
	    height: 1px;
	}
	.f-sF:nth-child(11) {
	    left: 23%;
	    top: -920px;
	    width: 4px;
	    height: 4px;
	}
	.f-sF:nth-child(12) {
	    left: 37%;
	    top: -870px;
	    width: 3px;
	    height: 3px;
	}
	.f-sF:nth-child(13) {
	    left: 36%;
	    top: -570px;
	    width: 5px;
	    height: 6px;
	}
	.f-sF:nth-child(14) {
	    left: 78%;
	    top: -730px;
	    width: 5px;
	    height: 3px;
	}
	.f-sF:nth-child(15) {
	    left: 3%;
	    top: -840px;
	    width: 3px;
	    height: 2px;
	}
	.f-sF:nth-child(16) {
	    left: 34%;
	    top: -960px;
	    width: 2px;
	    height: 3px;
	}
	.f-sF:nth-child(17) {
	    left: 7%;
	    top: -660px;
	    width: 4px;
	    height: 1px;
	}
	.f-sF:nth-child(18) {
	    left: 16%;
	    top: -510px;
	    width: 5px;
	    height: 5px;
	}
	.f-sF:nth-child(19) {
	    left: 77%;
	    top: -760px;
	    width: 3px;
	    height: 1px;
	}
	.f-sF:nth-child(20) {
	    left: 98%;
	    top: -240px;
	    width: 4px;
	    height: 1px;
	}
	.f-sF:nth-child(21) {
	    left: 71%;
	    top: -540px;
	    width: 6px;
	    height: 5px;
	}
	.f-sF:nth-child(22) {
	    left: 34%;
	    top: -650px;
	    width: 2px;
	    height: 5px;
	}
	.f-sF:nth-child(23) {
	    left: 65%;
	    top: -70px;
	    width: 1px;
	    height: 3px;
	}
	.f-sF:nth-child(24) {
	    left: 76%;
	    top: -970px;
	    width: 3px;
	    height: 4px;
	}
	.f-sF:nth-child(25) {
	    left: 79%;
	    top: -830px;
	    width: 3px;
	    height: 4px;
	}
	.f-sF:nth-child(26) {
	    left: 18%;
	    top: -540px;
	    width: 2px;
	    height: 5px;
	}
	.f-sF:nth-child(27) {
	    left: 99%;
	    top: -500px;
	    width: 6px;
	    height: 6px;
	}
	.f-sF:nth-child(28) {
	    left: 5%;
	    top: -270px;
	    width: 6px;
	    height: 3px;
	}
	.f-sF:nth-child(29) {
	    left: 64%;
	    top: -630px;
	    width: 5px;
	    height: 3px;
	}
	.f-sF:nth-child(30) {
	    left: 4%;
	    top: -130px;
	    width: 4px;
	    height: 1px;
	}
    .f-sF:nth-child(31) {
        left: 59%;
        top: -340px;
        width: 4px;
        height: 6px;
    }
    .f-sF:nth-child(32) {
        left: 44%;
        top: -100px;
        width: 1px;
        height: 6px;
    }
    .f-sF:nth-child(33) {
        left: 15%;
        top: -870px;
        width: 2px;
        height: 6px;
    }
    .f-sF:nth-child(34) {
        left: 76%;
        top: -490px;
        width: 2px;
        height: 5px;
    }
    .f-sF:nth-child(35) {
        left: 43%;
        top: -320px;
        width: 1px;
        height: 5px;
    }
    .f-sF:nth-child(36) {
        left: 4%;
        top: -620px;
        width: 5px;
        height: 5px;
    }
    .f-sF:nth-child(37) {
        left: 35%;
        top: -910px;
        width: 5px;
        height: 4px;
    }
    .f-sF:nth-child(38) {
        left: 60%;
        top: -400px;
        width: 4px;
        height: 1px;
    }
    .f-sF:nth-child(39) {
        left: 36%;
        top: -340px;
        width: 1px;
        height: 1px;
    }
    .f-sF:nth-child(40) {
        left: 79%;
        top: -140px;
        width: 6px;
        height: 5px;
    }
    .f-sF:nth-child(41) {
        left: 37%;
        top: -330px;
        width: 6px;
        height: 6px;
    }
    .f-sF:nth-child(42) {
        left: 57%;
        top: -520px;
        width: 4px;
        height: 1px;
    }
    .f-sF:nth-child(43) {
        left: 54%;
        top: -480px;
        width: 4px;
        height: 4px;
    }
    .f-sF:nth-child(44) {
        left: 4%;
        top: -220px;
        width: 4px;
        height: 5px;
    }
    .f-sF:nth-child(45) {
        left: 49%;
        top: -430px;
        width: 2px;
        height: 6px;
    }
    .f-sF:nth-child(46) {
        left: 18%;
        top: -290px;
        width: 6px;
        height: 5px;
    }
    .f-sF:nth-child(47) {
        left: 65%;
        top: -680px;
        width: 5px;
        height: 3px;
    }
    .f-sF:nth-child(48) {
        left: 21%;
        top: -390px;
        width: 2px;
        height: 4px;
    }
    .f-sF:nth-child(49) {
        left: 67%;
        top: -600px;
        width: 4px;
        height: 2px;
    }
    .f-sF:nth-child(50) {
        left: 64%;
        top: -10px;
        width: 6px;
        height: 3px;
    }
    .f-sF:nth-child(51) {
        left: 96%;
        top: -200px;
        width: 2px;
        height: 6px;
    }
    .f-sF:nth-child(52) {
        left: 1%;
        top: -740px;
        width: 4px;
        height: 2px;
    }
    .f-sF:nth-child(53) {
        left: 28%;
        top: -160px;
        width: 2px;
        height: 5px;
    }
    .f-sF:nth-child(54) {
        left: 58%;
        top: -170px;
        width: 2px;
        height: 4px;
    }
    .f-sF:nth-child(55) {
        left: 71%;
        top: -710px;
        width: 5px;
        height: 5px;
    }
    .f-sF:nth-child(56) {
        left: 61%;
        top: -120px;
        width: 5px;
        height: 1px;
    }
    .f-sF:nth-child(57) {
        left: 94%;
        top: -90px;
        width: 2px;
        height: 2px;
    }
    .f-sF:nth-child(58) {
        left: 83%;
        top: 0px;
        width: 2px;
        height: 5px;
    }
    .f-sF:nth-child(59) {
        left: 88%;
        top: -430px;
        width: 4px;
        height: 5px;
    }
    .f-sF:nth-child(60) {
        left: 33%;
        top: -30px;
        width: 6px;
        height: 5px;
    }
    .f-sF:nth-child(61) {
        left: 50%;
        top: -790px;
        width: 6px;
        height: 4px;
    }
    .f-sF:nth-child(62) {
        left: 32%;
        top: -960px;
        width: 2px;
        height: 4px;
    }
    .f-sF:nth-child(63) {
        left: 79%;
        top: -880px;
        width: 3px;
        height: 4px;
    }
    .f-sF:nth-child(64) {
        left: 13%;
        top: -10px;
        width: 4px;
        height: 4px;
    }
    .f-sF:nth-child(65) {
        left: 92%;
        top: -340px;
        width: 4px;
        height: 4px;
    }
    .f-sF:nth-child(66) {
        left: 26%;
        top: -210px;
        width: 6px;
        height: 2px;
    }
    .f-sF:nth-child(67) {
        left: 77%;
        top: -590px;
        width: 1px;
        height: 6px;
    }
    .f-sF:nth-child(68) {
        left: 15%;
        top: -70px;
        width: 5px;
        height: 3px;
    }
    .f-sF:nth-child(69) {
        left: 71%;
        top: -180px;
        width: 6px;
        height: 4px;
    }
    .f-sF:nth-child(70) {
        left: 41%;
        top: -930px;
        width: 2px;
        height: 5px;
    }
    .f-sF:nth-child(71) {
        left: 93%;
        top: -870px;
        width: 5px;
        height: 3px;
    }
    .f-sF:nth-child(72) {
        left: 54%;
        top: -470px;
        width: 1px;
        height: 5px;
    }
    .f-sF:nth-child(73) {
        left: 31%;
        top: -520px;
        width: 3px;
        height: 5px;
    }
    .f-sF:nth-child(74) {
        left: 58%;
        top: -810px;
        width: 5px;
        height: 3px;
    }
    .f-sF:nth-child(75) {
        left: 32%;
        top: -660px;
        width: 3px;
        height: 4px;
    }
    .f-sF:nth-child(76) {
        left: 17%;
        top: -860px;
        width: 5px;
        height: 6px;
    }
    .f-sF:nth-child(77) {
        left: 82%;
        top: -690px;
        width: 1px;
        height: 4px;
    }
    .f-sF:nth-child(78) {
        left: 78%;
        top: -850px;
        width: 4px;
        height: 5px;
    }
    .f-sF:nth-child(79) {
        left: 19%;
        top: -420px;
        width: 5px;
        height: 2px;
    }
    .f-sF:nth-child(80) {
        left: 7%;
        top: -810px;
        width: 5px;
        height: 1px;
    }
    .f-sF:nth-child(81) {
        left: 68%;
        top: -450px;
        width: 2px;
        height: 4px;
    }
    .f-sF:nth-child(82) {
        left: 66%;
        top: -900px;
        width: 5px;
        height: 3px;
    }
    .f-sF:nth-child(83) {
        left: 86%;
        top: -590px;
        width: 1px;
        height: 2px;
    }
    .f-sF:nth-child(84) {
        left: 72%;
        top: -230px;
        width: 2px;
        height: 2px;
    }
    .f-sF:nth-child(85) {
        left: 26%;
        top: -700px;
        width: 6px;
        height: 3px;
    }
    .f-sF:nth-child(86) {
        left: 46%;
        top: -840px;
        width: 2px;
        height: 2px;
    }
    .f-sF:nth-child(87) {
        left: 95%;
        top: -600px;
        width: 4px;
        height: 3px;
    }
    .f-sF:nth-child(88) {
        left: 6%;
        top: -610px;
        width: 6px;
        height: 4px;
    }
    .f-sF:nth-child(89) {
        left: 45%;
        top: -420px;
        width: 3px;
        height: 5px;
    }
    .f-sF:nth-child(90) {
        left: 45%;
        top: -100px;
        width: 6px;
        height: 1px;
    }
    .f-sF:nth-child(91) {
        left: 6%;
        top: -830px;
        width: 3px;
        height: 6px;
    }
    .f-sF:nth-child(92) {
        left: 58%;
        top: -770px;
        width: 1px;
        height: 3px;
    }
    .f-sF:nth-child(93) {
        left: 23%;
        top: -870px;
        width: 4px;
        height: 6px;
    }
    .f-sF:nth-child(94) {
        left: 89%;
        top: -340px;
        width: 6px;
        height: 4px;
    }
    .f-sF:nth-child(95) {
        left: 46%;
        top: -790px;
        width: 4px;
        height: 2px;
    }
    .f-sF:nth-child(96) {
        left: 94%;
        top: -140px;
        width: 6px;
        height: 5px;
    }
    .f-sF:nth-child(97) {
        left: 32%;
        top: -430px;
        width: 3px;
        height: 1px;
    }
    .f-sF:nth-child(98) {
        left: 85%;
        top: -40px;
        width: 6px;
        height: 1px;
    }
    .f-sF:nth-child(99) {
        left: 66%;
        top: -710px;
        width: 1px;
        height: 1px;
    }
    .f-sF:nth-child(100) {
        left: 33%;
        top: -790px;
        width: 1px;
        height: 4px;
    }


/* Hide snow on tablets and mobiles */
@media screen and (max-width:979px){
	.snow{ display: none; }
}
	
</style>

Τέλος, στο globalTemplate πάνω από το </body> προσθέτουμε:

        <!--Snow effect-->
        {template="js_christmas" app="core" group="global" location="global" params=""}

 

Μοιράσου αυτή την δημοσίευση


Link to post
Share on other sites
Σχολιάστε εποικοδομητικά

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Απάντηση στο θέμα...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. | Terms of Use