JoeDer Δημοσιεύτηκε 26 Δεκεμβρίου 2017 Share Δημοσιεύτηκε 26 Δεκεμβρίου 2017 Με τον παρακάτω τρόπο μπορούμε να προσθέσουμε νιφάδες χωνιού. Δημιουργούμε ένα νέο 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 More sharing options...
Dimitris_p Δημοσιεύτηκε 20 Δεκεμβρίου 2020 Share Δημοσιεύτηκε 20 Δεκεμβρίου 2020 Καλησπέρα και καλές γιορτες. Γιάννη αν θες μου εξηγείς πως πάμε εδώ? core > global > global Link to comment Share on other sites More sharing options...
JoeDer Δημοσιεύτηκε 21 Δεκεμβρίου 2020 Συγγραφέας Share Δημοσιεύτηκε 21 Δεκεμβρίου 2020 12 hours ago, Dimitris_p said: Καλησπέρα και καλές γιορτες. Γιάννη αν θες μου εξηγείς πως πάμε εδώ? core > global > global Ή για την έκδοση 4.4 ανέβασε το plugin: Snow.xml 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Δημιουργήστε ένα λογαριασμό ή συνδεθείτε προκειμένου να αφήσετε κάποιο σχόλιο
Πρέπει να είστε μέλος για να μπορέσετε να αφήσετε κάποιο σχόλιο
Δημιουργία λογαριασμού
Κάντε μια δωρεάν εγγραφή στην κοινότητά μας. Είναι εύκολο!
Εγγραφή νέου λογαριασμούΣύνδεση
Εάν έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.
Συνδεθείτε τώρα