Fòrum Àgora-NODES

Floquets de neu

Floquets de neu

by CHRISTIAN ALVAREZ LUQUE -
Number of replies: 37
Hola.


He vist que surten floquets de neu al web de l'agora.xtec.cat.  Hi ha alguna possibilitat per activar-ho als webs de Nodes? Quedaria molt divertit!!!


Gràcies!!!

In reply to CHRISTIAN ALVAREZ LUQUE

Re: Floquets de neu

by Sara Arjona Téllez (Moodle HQ) -

Hola Christian!

I tant! smile La idea està extreta d'aquest article de Moodle, però a Nodes també és possible afegir els floquets de neu. Per fer-ho podeu seguir els passos següents:

  • Crear un giny de tipus "Text" a la "Portada (barra esquerra)".
  • Enganxar el codi següent al giny de Text anterior:

<SCRIPT type="text/javascript">
/*
Snow Fall 1 - no images - Java Script
Visit http://rainbow.arch.scriptmania.com/scripts/
 for this script and many more
*/

// Set the number of snowflakes (more than 30 - 40 not recommended)
var snowmax=35

// Set the colors for the snow. Add as many colors as you like
var snowcolor=new Array("#aaaacc","#ddddff","#ccccdd","#f3f3f3","#f0ffff")

// Set the fonts, that create the snowflakes. Add as many fonts as you like
var snowtype=new Array("Times","Arial","Times","Verdana")

// Set the letter that creates your snowflake (recommended: * )
var snowletter="*"

// Set the speed of sinking (recommended values range from 0.3 to 2)
var sinkspeed=0.6

// Set the maximum-size of your snowflakes
var snowmaxsize=30

// Set the minimal-size of your snowflakes
var snowminsize=8

// Set the snowing-zone
// Set 1 for all-over-snowing, set 2 for left-side-snowing
// Set 3 for center-snowing, set 4 for right-side-snowing
var snowingzone=1

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////


// Do not edit below this line
var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)
var browserok=ie5||ns6||opera

function randommaker(range) {
 rand=Math.floor(range*Math.random())
 return rand
}

function initsnow() {
 if (ie5 || opera) {
 marginbottom = document.body.scrollHeight
 marginright = document.body.clientWidth-15
 }
 else if (ns6) {
 marginbottom = document.body.scrollHeight
 marginright = window.innerWidth-15
 }
 var snowsizerange=snowmaxsize-snowminsize
 for (i=0;i<=snowmax;i++) {
 crds[i] = 0;
 lftrght[i] = Math.random()*15;
 x_mv[i] = 0.03 + Math.random()/10;
 snow[i]=document.getElementById("s"+i)
 snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
 snow[i].size=randommaker(snowsizerange)+snowminsize
 snow[i].style.fontSize=snow[i].size+'px';
 snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
 snow[i].style.zIndex=1000
 snow[i].sink=sinkspeed*snow[i].size/5
 if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
 if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
 if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
 if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
 snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size)
 snow[i].style.left=snow[i].posx+'px';
 snow[i].style.top=snow[i].posy+'px';
 }
 movesnow()
}

function movesnow() {
 for (i=0;i<=snowmax;i++) {
 crds[i] += x_mv[i];
 snow[i].posy+=snow[i].sink
 snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+'px';
 snow[i].style.top=snow[i].posy+'px';

 if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
 if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
 if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
 if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
 if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
 snow[i].posy=0
 }
 }
 var timer=setTimeout("movesnow()",50)
}

for (i=0;i<=snowmax;i++) {
 document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}
if (browserok) {
 window.onload=initsnow
}

</SCRIPT>
  • Desar els canvis i accedir a la portada per veure-hi nevar smile

Per treure'l quan passin festes només haureu d'esborrar aquest giny de tipus text que haureu afegit.

Una abraçada i bones festes!

Sara


Attachment giny_text_flocsneu.png
In reply to Sara Arjona Téllez (Moodle HQ)

Re: Floquets de neu

by AGUSTI BARBOLLA RODRIGUEZ -

Ho he fet però només surten els floquets de neu a la columna dreta però no a tota la pàgina.

http://agora.xtec.cat/esc-assis/


In reply to AGUSTI BARBOLLA RODRIGUEZ

Re: Floquets de neu

by CHRISTIAN ALVAREZ LUQUE -
In reply to CHRISTIAN ALVAREZ LUQUE

Re: Floquets de neu

by Sara Arjona Téllez (Moodle HQ) -

Hola Christian!

Què bé! smile

Per cert, aprofitem per fer-vos un suggeriment: si reviseu el llibre d'estil de Nodes (http://agora.xtec.cat/nodes/llibre-destil/) veureu que precisament una de les recomanacions és la d'evitar redundàncies amb les imatges de la capçalera i la resta contingut: http://agora.xtec.cat/nodes/llibre-destil/foto-carrusel/eviteu-redundancies/ Tot i que la imatge nadalenca és molt maca, potser seria convenient deixar-la només a un únic lloc wink

Una abraçada i bona entrada d'any!

Sara

In reply to Sara Arjona Téllez (Moodle HQ)

Re: Floquets de neu

by CHRISTIAN ALVAREZ LUQUE -

Moltes gràcies pel suggeriment! S'agraeix!!! Qualsevol altre cosa no dubteu en comentar-la per anar millorant! Aquest curs hem fusionat web i bloc amb Nodes i hem engejat el moodle. La majoria de mestres estan publicant articles, és tot un repte per l'escola però estem molt contents perquè sembla que ho estem aconseguint!!! smile 

In reply to CHRISTIAN ALVAREZ LUQUE

Re: Floquets de neu

by Sara Arjona Téllez (Moodle HQ) -

Hola Christian!

Gràcies a vosaltres per tenir en compte el suggeriment! wink El logotip del centre encara està força redundant, però ara com a mínim no es veu la mateixa imatge dues vegades!!

Ens encanta llegir que aquest any heu posat en marxa tants projectes i que, de moment, els mestres estan publicant articles! Felicitats perquè sabem que no és fàcil! smile

Una abraçada i molt bona entrada d'any!

Sara

In reply to Sara Arjona Téllez (Moodle HQ)

Re: Floquets de neu

by CHRISTIAN ALVAREZ LUQUE -

Ja he tret els floquets, com aconselleu, després de les festes. També he tret el logotip del carrusel de la portada, perquè no quedi repetitiu. He fet una imatge que juga amb els triangles, símbol de l'escola, però de manera que juga amb les tonalitats de blau que actualment tenim al Nodes. També he millorat la mida dels articles (teniem diferents mides i quedava força irregular, seleccionavem l'opció "mostra contingut sencer"), seguint els consells dels manuals de "bones pràctiques". Ho hem canviat per fotoresums, és més àgil per llegir al mòbil i al web queda més uniforme.  Gràcies pels suggeriments. 

In reply to AGUSTI BARBOLLA RODRIGUEZ

Re: Floquets de neu

by Sara Arjona Téllez (Moodle HQ) -

Hola Agustí!

Hem estat fent algunes proves (com ara provar d'incrustar el codi a la pàgina d'inici o a algun article) i, pel que hem vist, de moment no és possible que els floquets surtin a tota la pàgina si només utilitzeu la barra a la dreta sad 

Per cert, genial que hagueu personalitzat el colors dels flocs per adaptar-los als del disseny de la vostra pàgina! smile

Una abraçada i bones (i parcialment nevades) festes! wink

Sara

In reply to Sara Arjona Téllez (Moodle HQ)

Re: Floquets de neu

by AGUSTI BARBOLLA RODRIGUEZ -

MOltes gràcies pel vostre suport. És molt agradable comptar amb un equip de persones com vosaltres que sempre, sempre esteu a resoldre els nostres dubtes, problemes i mals de cap.

Moltes gràcies per la vostra feina.

Bon any.

Agustí

In reply to AGUSTI BARBOLLA RODRIGUEZ

Re: Floquets de neu

by Sara Arjona Téllez (Moodle HQ) -

Hola Agustí!

Gràcies pels teus comentaris! smile Ens fareu emocionar i tot! wink

Una abraçada enorme, bona entrada d'any i els millors desitjos pel 2016!!!!

Sara

In reply to Sara Arjona Téllez (Moodle HQ)

Re: Floquets de neu

by ROSA M. OBRADORS PUIGDELLIVOL -

Genial!!

Al web de l'Escola Mare de Deú de Montserrat de Súria també neva:

http://agora.xtec.cat/ceip-montserrat-suria/

Aprofito per agrair-vos la feina feta, el suport que ens doneu... i desitjar-vos a tots un FELIÇ 2016;

Fins aviat,

Rosa

In reply to ROSA M. OBRADORS PUIGDELLIVOL

Re: Floquets de neu

by Sara Arjona Téllez (Moodle HQ) -

Hola Rosa!

Què xulo! Ens alegra que us hagi agradat la idea! smile

Mil gràcies a vosaltres també per aquestes mostres d'agraïmes i feliç 2016!!

Sara

P.D.: Ara que han passat festes, recordeu-vos de treure els floquets wink


In reply to Sara Arjona Téllez (Moodle HQ)

Re: Floquets de neu

by CHRISTIAN ALVAREZ LUQUE -

Torna el temps de Nadal i podem tornar a posar els floquets al nostre Nodes. He vist que hi ha alguns wordpress que tenen floquets però que no són * , són més boletes. https://ursusnatura.wordpress.com/ Sabeu com es podria fer? Gràcies! 

In reply to CHRISTIAN ALVAREZ LUQUE

Re: Floquets de neu

by MONICA GRAU PRIETO -

Hola Christian,

hem trobat el mateix o un de molt semblant. Pots provar-ho posant aquest codi a un bloc HTML:


Fins ara,

Mònica

In reply to MONICA GRAU PRIETO

Re: Floquets de neu

by ROSA M. OBRADORS PUIGDELLIVOL -

Bon dia Mònica,

Aquest codi, si volem que els floquets surtin a la portada, on s'ha de posar?

En un giny a la banda esquerra de la portada?

Fins aviat

In reply to ROSA M. OBRADORS PUIGDELLIVOL

Re: Floquets de neu

by MONICA GRAU PRIETO -

Hola Rosa Maria,

sí, has de posar un giny HTML a la barra esquerra de portada. Si no et funciona ens ho dius i ens ho mirem.

Fins ara,

Mònica

In reply to MONICA GRAU PRIETO

Re: Floquets de neu

by ROSA M. OBRADORS PUIGDELLIVOL -

Gràcies Mònica,

Ja neva!!! Amb el teu ajut ha estat fàcil...

http://agora.xtec.cat/ceip-montserrat-suria/

Aprofito per desitjar-vos a tots BON NADAL I MILLOR 2017,

Fins aviat,

Rosa

In reply to Sara Arjona Téllez (Moodle HQ)

Re: Floquets de neu

by Alfonso Martínez Monzó -

Hola Sara,

He provat de posar aquest codi a un bloc del moodle i en principi funciona, el problema és que ara no puc editar cap bloc de la pàgina d'inici del moodle, també tinc problemes per tancar la sessió de l'usuari, està en color gris tant una cosa com l'altra, sembla deshabilitada aquesta opció.

Salutacions,

Alfonso

In reply to Sara Arjona Téllez (Moodle HQ)

Re: Floquets de neu

by JOSEP BAIRAGUET GUAL -

No hi ha manera de que em funcioni, no acabo de saber fer-ho. HELP ME PLEASE!!!

In reply to JOSEP BAIRAGUET GUAL

Re: Floquets de neu

by Isabel Oussedik Vilalta (Equip tècnic d'Àgora) -

Bon dia Josep,

Ens pots indicar l'URL del vostre Nodes? Li donarem una ullada...

Salutacions,

Isabel

In reply to Isabel Oussedik Vilalta (Equip tècnic d'Àgora)

Re: Floquets de neu

by XAVIER REYES TINEO -

Nosaltres també hem provat tots els scripts d'aquest fil i no me'n surto. Heu trobat la solució?

Merci!

https://agora.xtec.cat/insbitacola/

In reply to JOSEP BAIRAGUET GUAL

Re: Floquets de neu

by ROSA M. OBRADORS PUIGDELLIVOL -

Bon dia,

Jo també he provat de posar els floquets de neu. Crec que he posat el mateix giny de text que el curs passat, a la part esquerra de la portada. L'he posat en primer lloc...

<script src="http://rainbow.arch.scriptmania.com/scripts/bg/snowstorm.js" type="text/javascript"></script>

No em funciona! No neva!

https://agora.xtec.cat/ceip-montserrat-suria/

Ha canviat el funcionament?

Fins aviat,

Rosa

In reply to CHRISTIAN ALVAREZ LUQUE

Re: Floquets de neu SOLUCIÓ DESEMBRE 18

by CHRISTIAN ALVAREZ LUQUE -
He provat el codi que fins l'any passat fèiem servir perquè hi sortís neu, però ja no funciona. He anat provant i ho he aconseguit de la següent manera.


En comptes d'afegir un giny de text amb codi, heu d'anar a PERSONALITZA i he fet click a CSS additionals, enganxar el següent codi. FUNCIONA! 


body { position: relative; } body:before { content: ''; display: block; position: absolute; z-index: 999999999999999 !important; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; background-image: url('https://www.dropbox.com/s/bgwuzfu83pjb5s1/divi-life-snowflakes-a-2.png?dl=1'), url('https://www.dropbox.com/s/54le1eyh01vb253/divi-life-snowflakes-b.png?dl=1'), url('https://www.dropbox.com/s/gfm01rozxanf3ub/divi-life-snowflakes-d.png?dl=1'); -webkit-animation: snow 15s linear infinite; -moz-animation: snow 15s linear infinite; -ms-animation: snow 15s linear infinite; animation: snow 15s linear infinite; } @keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} } @-moz-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 100% {background-position: 400px 1000px, 200px 400px, 100px 300px;} } @-webkit-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} } @-ms-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} }


Podeu veure com neva al web del meu centre: https://agora.xtec.cat/escolacanserra/

In reply to CHRISTIAN ALVAREZ LUQUE

Re: Floquets de neu SOLUCIÓ DESEMBRE 18

by ROSA M. OBRADORS PUIGDELLIVOL -

Bon dia!

Moltes gràcies!!!

A Súria també ha començat a nevar!

https://agora.xtec.cat/ceip-montserrat-suria/



In reply to ROSA M. OBRADORS PUIGDELLIVOL

Re: Floquets de neu SOLUCIÓ DESEMBRE 18

by ROSA-M. BERGADA LLOBET -

Moltes gràcies companys/companyes ! 

Ja neva al web del SE Segarra!

Sou uns/unes cracks!

In reply to CHRISTIAN ALVAREZ LUQUE

Re: Floquets de neu SOLUCIÓ DESEMBRE 18

by Alfonso Martínez Monzó -

Bon dia,

He provat l'opció de personalitzar el CSS amb el còdi:

body { position: relative; } body:before { content: ''; display: block; position: absolute; z-index: 999999999999999 !important; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; background-image: url('https://www.dropbox.com/s/bgwuzfu83pjb5s1/divi-life-snowflakes-a-2.png?dl=1'), url('https://www.dropbox.com/s/54le1eyh01vb253/divi-life-snowflakes-b.png?dl=1'), url('https://www.dropbox.com/s/gfm01rozxanf3ub/divi-life-snowflakes-d.png?dl=1'); -webkit-animation: snow 15s linear infinite; -moz-animation: snow 15s linear infinite; -ms-animation: snow 15s linear infinite; animation: snow 15s linear infinite; } @keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} } @-moz-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 100% {background-position: 400px 1000px, 200px 400px, 100px 300px;} } @-webkit-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} } @-ms-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} }

Però no em deixa desar perquè diu que hi han dos errors que podrien estropear el web.

Espero la resposta abans de publicar el CSS adicional.

Gràcies i Bon Nadal a tots/es.



Attachment neu.jpg
In reply to Alfonso Martínez Monzó

Re: Floquets de neu SOLUCIÓ DESEMBRE 18

by MONICA GRAU PRIETO -

Hola, Alfonso,

sí, el codi de l'any passat dóna aquest error. Pots fer servir aquest: https://educaciodigital.cat/moodle/moodle/mod/forum/discuss.php?d=130868#p457194

Fins ara,

Mònica

In reply to MONICA GRAU PRIETO

Re: Floquets de neu SOLUCIÓ DESEMBRE 18

by Alfonso Martínez Monzó -

Bon dia,

Finalment he posat aquest, però he modificat:

body { position: relative; } body:before { content: ''; display: block; position: absolute; z-index: 999999999999999 !important; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; background-image: url('https://www.dropbox.com/s/bgwuzfu83pjb5s1/divi-life-snowflakes-a-2.png?dl=1'), url('https://www.dropbox.com/s/54le1eyh01vb253/divi-life-snowflakes-b.png?dl=1'), url('https://www.dropbox.com/s/gfm01rozxanf3ub/divi-life-snowflakes-d.png?dl=1'); -webkit-animation: snow 15s linear infinite; -moz-animation: snow 15s linear infinite; -ms-animation: snow 15s linear infinite; animation: snow 15s linear infinite; } @keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} } @-moz-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 100% {background-position: 400px 1000px, 200px 400px, 100px 300px;} } @-webkit-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} } @-moz-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} }

Gràcies i Bon Nadal a tots/es.

Alfonso Martínez