Effetto bollicine che salgono-facciamo diventare effervescenti i nostri blog:

domenica, febbraio 13, 2011

Mi sono stati chiesti altri effetti di oggetti che scivolano sulla pagina del blog...questa volta ho pensato che anzichè vederli cadere sul fondo sarebbe stato carino vederli salire verso l'alto...tanto per cambiare...così eco qua delle bollicine per avere un blo effervescente!
In Pratica vedrete tante bollicine salire sù proprio come quelle nell'immaginece homesso come esempio

Il codice da inserire è lungo, ma non spaventatevi, va solo copiato e incollato nella Head, in pratica:

  • design
  • modifica htlm
  • proprio sotto : <head>
  • dovete incollare tutto il codice
  • fate anteprima
  • salvate. 

<script type="text/javascript">

// <![CDATA[

var colours=new Array("#a6f", "#60f", "#60f", "#a6f", "#ccc"); // colours for top, right, bottom and left borders and background of bubbles

var bubbles=66; // how many bubbles are moving at any given time



/****************************

*   JavaScript Bubble Bath  *

* (c) 2010 mf2fm web-design *

*  http://www.mf2fm.com/rv  *

* DON'T EDIT BELOW THIS BOX *

****************************/

var swide=800;

var shigh=600;

var bubb=new Array();

var bubbx=new Array();

var bubby=new Array();

var bubbs=new Array();



window.onload=function() { if (document.getElementById) {

  var b, i;

  b=document.createElement("div");

  i=b.style;

  i.position="absolute";

  b.setAttribute("id", "bod");

  document.body.appendChild(b);

  set_scroll();

  set_width();



  var rats, div;

  for (var i=0; i<bubbles; i++) {

    rats=createDiv("3px", "3px");



    div=createDiv("auto", "auto");

    rats.appendChild(div);

    div=div.style;

    div.top="1px";

    div.left="0px";

    div.bottom="1px";

    div.right="0px";

    div.borderLeft="1px solid "+colours[3];

    div.borderRight="1px solid "+colours[1];



    div=createDiv("auto", "auto");

    rats.appendChild(div);

    div=div.style;

    div.top="0px";

    div.left="1px";

    div.right="1px";

    div.bottom="0px"

    div.borderTop="1px solid "+colours[0];

    div.borderBottom="1px solid "+colours[2];



    div=createDiv("auto", "auto");

    rats.appendChild(div);

    div=div.style;

    div.left="1px";

    div.right="1px";

    div.bottom="1px";

    div.top="1px";

    div.backgroundColor=colours[4];

    div.opacity=0.5;

    if (document.all) div.filter="alpha(opacity=50)";



    b.appendChild(rats);

    bubb[i]=rats.style;

  }

  bubble();

}}



function bubble() {

  var c;

  for (c=0; c<bubbles; c++) if (!bubby[c] && Math.random()<0.333) {

    bubb[c].left=(bubbx[c]=Math.floor(swide/6+Math.random()*swide/1.5)-10)+"px";

    bubb[c].top=(bubby[c]=shigh)+"px";

    bubb[c].width="3px";

    bubb[c].height="3px"

    bubb[c].visibility="visible";

    bubbs[c]=3;

    break;

  }

  for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);

  setTimeout("bubble()", 40);

}



function update_bubb(i) {

  if (bubby[i]) {

    bubby[i]-=bubbs[i]/2+i%2;

    if (bubby[i]>0) {

      if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {

        bubb[i].width=bubbs[i]+"px";

        bubb[i].height=bubbs[i]+"px";

      }

      bubb[i].top=bubby[i]+"px";

      bubbx[i]+=(i%5-2)/5;

      bubb[i].left=bubbx[i]+"px";

    }

    else {

      bubb[i].visibility="hidden";

      bubby[i]=0;

      return;

    }

  }

}



window.onresize=set_width;

function set_width() {

  if (document.documentElement && document.documentElement.clientWidth) {

    swide=document.documentElement.clientWidth;

    shigh=document.documentElement.clientHeight;

  }

  else if (typeof(self.innerHeight)=="number") {

    swide=self.innerWidth;

    shigh=self.innerHeight;

  }

  else if (document.body.clientWidth) {

    swide=document.body.clientWidth;

    shigh=document.body.clientHeight;

  }

  else {

    swide=800;

    shigh=600;

  }

}



window.onscroll=set_scroll;

function set_scroll() {

  var sleft, sdown;

  if (typeof(self.pageYOffset)=="number") {

    sdown=self.pageYOffset;

    sleft=self.pageXOffset;

  }

  else if (document.body.scrollTop || document.body.scrollLeft) {

    sdown=document.body.scrollTop;

    sleft=document.body.scrollLeft;

  }

  else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

    sleft=document.documentElement.scrollLeft;

    sdown=document.documentElement.scrollTop;

  }

  else {

    sdown=0;

    sleft=0;

  }

  document.getElementById("bod").style.top=sdown+"px";

  document.getElementById("bod").style.left=sleft+"px";

}



function createDiv(height, width) {

  var div=document.createElement("div");

  div.style.position="absolute";

  div.style.height=height;

  div.style.width=width;

  div.style.overflow="hidden";

  return (div);

}

// ]]>

</script>




Tenete presente che potete cambiare il colore delle bollicine come più vi pare...usate la tavola che trovate qua per prelevare il codice del colore che andrete a sostituire all'interno dello script, lo troverete subito all'inizio ed è il seguente:
var colours=new Array("#a6f", "#60f", "#60f", "#a6f", "#ccc");
dovrete cambiare i codici tra parentesi se voleti cambiare il colore.


You Might Also Like

26 scarabocchi

  1. bella l'idea delle bollicine ^__^ mi piace. Buona domenica effervescente.

    RispondiElimina
  2. ehm... scusa, non trovo il codice, ma dov'è????

    RispondiElimina
  3. Ma che bella idea le bollicine che salgono. Fanno allegria e rendono il blog frizzante come un bicchiere di spumante.

    RispondiElimina
  4. Ciao zucchetta capricciosa! :)
    azzurra

    RispondiElimina
  5. Effervescente di efferalgan... :(
    bacio ambra!
    :)
    azzurra

    RispondiElimina
  6. torno e cosa trovo????non ho parole!!!bellissime le bollicine....ma come si fa???mi piace tutto!!!!!poi il mio blog diventa un pasticcio!!!???!!!... complimenti!!

    RispondiElimina
  7. l'idea mi piace... ma non ce la farò mai e quindi passo per questa volta

    ciao

    Vale

    RispondiElimina
  8. Grazie Azzurra!!
    con i tuoi insegnamenti sono riuscita anche a cambiare i colori.. SEI UN MITO!!!
    un bacione
    PAola

    RispondiElimina
  9. Ciao...perchè il tuo blog diventa un pasticcio?
    Se vuoi le bollicine ho scritto come inserirle...e se vuoi un amano...dimmelo!
    e..bentornata!
    azzurra

    RispondiElimina
  10. Perfetto Paola...
    sono venutaa vedere e sììììì
    mipiace!
    è un effetto veramente carino e finalmente qualcosa di nuovo...
    bacio
    azzurra

    RispondiElimina
  11. Se non fosse che ho un blog bellissimo, grazie a una grafica di prim'ordine, aggiungerei volentieri quest'idea......

    Abbracci

    RispondiElimina
  12. azzurra .. ho messo le bollicine :) sono bellissime!!!
    grazie

    RispondiElimina
  13. Vale, l'effetto è molto carino...serve una mano???
    :)
    azzurra

    RispondiElimina
  14. ciao guardiano...
    vorrà dire che il prossimo sfondo lo faccio subacquo e mettiamo bollicine...
    ;)
    azzurra

    RispondiElimina
  15. Ciao azzurrina....ho messo lo script delle bollicine ma io non vedo nulla!!!!cosa avro' sbagliato????...forse il colore????...bacibaciotti

    RispondiElimina
  16. ciao Azzurra, Buon San Valentino!! bellissima questa idea, io ho provato, ho fatto come dicevi e non è comparso niente, dato che sicuramente
    dipende da me, non ho salvato! Sai evitiamo di fare ancora danni!! un bacione cara!!!!

    RispondiElimina
  17. Ciao fiorellino!
    sìsìsìsìsìs....sono proprio carine!
    :)
    azzurra

    RispondiElimina
  18. carissima...non so cosa puoi aver sbagliato...sicura i aver copiato tutto il coice?
    Non posso saperlo se non loveo...
    :(
    So che il codice funziona...
    :)
    azzurra

    RispondiElimina
  19. maria luisa...io le vedo le bollicine sul tuo blog!
    :)
    azzurra

    RispondiElimina
  20. Ciao!! Io non trovo head da nessuna parte come faccio? :(

    RispondiElimina
  21. Ciao morenita...ehm...vedo che hai trovato la head!
    :)
    complimentoni e benvenuta nel mio blog!
    azzurra

    RispondiElimina
  22. come al solito .....bravissima e grazie

    ciao Roberta

    RispondiElimina
  23. Finalmente quello che cercavo!!! Stavo diventando matta a cercare queste benedette bollicine che salgono! Grazie mille per questo post! ;)

    RispondiElimina
  24. Grazie ate per la visita MissDanyCullen!
    :)
    azzurra

    RispondiElimina
  25. Ciao azzurra splendido blog!!! non riesco a inserire le bollicine!!! Mi da errore 500, ossia mi dice che e' stato trovato piu' di un widget, ma quando vado a incollare il codice, devo cancellare qualcosa? io lo inserisco sotto head, dove sbaglio? Grazie 1000 sei bravissima!!!!

    RispondiElimina
  26. Ciao Bea...
    in effetti si fa proprio come descritto...non capisco...stanno usando questo script in tanti....sicura di copiare proprio tutto tutto?
    azzurra

    RispondiElimina

Grazie della visita e del tuo commento...♥♥♥
è un piacere leggervi!
Sorrisone!
:)

Nota. Solo i membri di questo blog possono postare un commento.

Circa Grafic Scribbles








modificare foto

Paperblog : le migliori informazioni in diretta dai blog

Mr.Webmaster


Motori ricerca

SEO


BlogItalia.it - La directory italiana dei blog

siti
sito internetBlog d'argento



Ebuzzing - Top dei blog - Blog creativi


Visite

eXTReMe Tracker

Views

© 2011 - 2016 Grafic Scribbles, AllRightsReserved.. Powered by Blogger.

on line