Winter is coming!
Con questo codice, è possibile inserire l'effetto "neve" sul forum, si tratta di un effetto basato esclusivamente sui CSS, non è necessario inserire dei javascript, e quindi è più facilmente installabile e personalizzabile dagli amministratori che non abbiano le conoscenze necessarie per modificare un javascript.
Nella seconda parte della guida è fornito il codice che si può inserire, come decorazione invernale, nella versione mobile del forum,
qui l'effetto nevicata sarà però applicato solo allo spazio del logo e non all'intero sfondo del forum.
Installazione
Per installarlo basta inserire, in Amministrazione → Grafica →
Colori e stili (in una posizione qualsiasi, si consiglia, per maggior comodità, di inserirlo in fondo ai codici già presenti), questo codice:
CODICE
/* NEVE SUL FORUM */
@keyframes nevica {0% {background-position: 0 0, 0 0, 0 0}
100% {background-position: 600px 600px, 400px 400px, 200px 200px}}
@-webkit-keyframes nevica {0% {background-position: 0 0, 0 0, 0 0}
100% {background-position: 600px 600px, 400px 400px, 200px 200px}}
body:not(.mobile) .snow_effect {position: relative; width: 100%; background-image: url(https://mod.forumfree.it/img/neve/set2_img1.png), url(https://mod.forumfree.it/img/neve/set2_img2.png), url(https://mod.forumfree.it/img/neve/set2_img3.png); animation: nevica 30s linear infinite; -webkit-animation: nevica 30s linear infinite}
Poi va inserito, in Amministrazione → Grafica →
Codice HTML, nel box HTML
in cima a tutte le pagine, quest'altro codice (inseritelo sopra i codici eventualmente già presenti):
HTML
<div class="snow_effect">
Infine, sempre in
Codice HTML, nel box HTML
in fondo a tutte le pagine inserite (sotto i codici già presenti in quel box) la chiusura del div:
IMPORTANTE, per i forum con sfondo bianco o molto chiaro: essendo i fiocchi anch'essi bianchi non si vedrà l'effetto neve se prima non prendete qualche accorgimento.
Potete, ad esempio, inserire uno sfondo semi-trasparente grigio a
.snow_effect in questo modo:
CODICE
body:not(.mobile) .snow_effect {position: relative; width: 100%; background-color: rgba(128, 128, 128, .5); background-image: url(httsp://mod.forumfree.it/img/neve/set1_img1.png), url(https://mod.forumfree.it/img/neve/set1_img2.png), url(https://mod.forumfree.it/img/neve/set1_img3.png); animation: nevica 30s linear infinite; -webkit-animation: nevica 30s linear infinite}
Potete modificare il colore (e l'opacità) a piacimento:
qui trovate una guida su come usare l'rgba.
La parte
body:not(.mobile) serve a non mostrare l'effetto neve agli utenti che usano tablet e smartphone per accedere alla versione desktop del sito, visto che tali dispositivi potrebbero avere problemi con un effetto simile.
Personalizzazioni opzionali
Con questo codice è possibile personalizzare sia l'animazione sia le immagini utilizzate (sono tre, sono le immagini di sfondo del selettore .snow_effect), linkiamo qui
www.html.it/articoli/animazioni-css3-keyframe-e-easing-1/www.html.it/pag/14225/gestione-dello-sfondo/due guide utili (e non è difficile reperirne altre utilizzando i motori di ricerca).
Altri effetti di nevicata
Non tutti i tipi di neve sono uguali e così è anche possibile personalizzare l'effetto neve con diversi tipi di nevicata.
Nel codice fornito è inserita la
nevicata default, ce ne sono altre tre che forniamo (oltre a quelle che ogni singolo utente può fare con un programma di grafica).
Per fare la modifica dovete
solo sostituire il selettore
.snow_effect, gli altri
non vanno alterati e/o rimossi.
SET ALTERNATIVO 1:CODICE
body:not(.mobile) .snow_effect {position: relative; width: 100%; background-image: url(https://mod.forumfree.it/img/neve/set1_img1.png), url(https://mod.forumfree.it/img/neve/set1_img2.png), url(https://mod.forumfree.it/img/neve/set1_img3.png); animation: nevica 30s linear infinite; -webkit-animation: nevica 30s linear infinite}
CODICE
body:not(.mobile) .snow_effect {position: relative; width: 100%; background-image: url(https://mod.forumfree.it/img/neve/set3_img1.png), url(https://mod.forumfree.it/img/neve/set3_img2.png), url(https://mod.forumfree.it/img/neve/set3_img3.png); animation: nevica 30s linear infinite; -webkit-animation: nevica 30s linear infinite}
CODICE
body:not(.mobile) .snow_effect {position: relative; width: 100%; background-image: url(https://mod.forumfree.it/img/neve/set4_img1.png), url(https://mod.forumfree.it/img/neve/set4_img2.png), url(https://mod.forumfree.it/img/neve/set4_img3.png); animation: nevica 30s linear infinite; -webkit-animation: nevica 30s linear infinite}
Se avete altri set da proporre o questioni da porre usate la sezione
Supporto Script.
