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

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


JoeDer

Recommended Posts

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

Δημιουργούμε ένα νέο 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 comment
Share on other sites


  • 2 years later...
12 hours ago, Dimitris_p said:

Καλησπέρα και καλές γιορτες. Γιάννη αν θες μου εξηγείς πως πάμε εδώ?  core > global > global

core>global>global.png

 

Ή για την έκδοση 4.4 ανέβασε το plugin: Snow.xml

  • Like 1
Link to comment
Share on other sites


Δημιουργήστε ένα λογαριασμό ή συνδεθείτε προκειμένου να αφήσετε κάποιο σχόλιο

Πρέπει να είστε μέλος για να μπορέσετε να αφήσετε κάποιο σχόλιο

Δημιουργία λογαριασμού

Κάντε μια δωρεάν εγγραφή στην κοινότητά μας. Είναι εύκολο!

Εγγραφή νέου λογαριασμού

Σύνδεση

Εάν έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
×
×
  • 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