BLOBS(KÉPERNYŐ EFFEKT)
BLOBS(KÉPERNYŐ EFFEKT):
Demó:
Az oldalon látható!
Kód:
<script type="text/javascript">
// <![CDATA[
var colours=new Array("#93f", "#3f9", "#f39", "#39f", "#9f3"); // what colour are the blobs
var speed=50; // speed of animation, lower is faster
var blobs=30; // how many blobs are in the jar
var size=80; // maximum blob size
 
/***************************\
*   Blobs in a Jar Effect   *
*(c)2012-20 mf2fm web-design*
*  http://www.mf2fm.com/rv  *
* DON'T EDIT BELOW THIS BOX *
\***************************/
 
var div;
var xpos=new Array();
var ypos=new Array();
var zpos=new Array();
var dx=new Array();
var dy=new Array();
var dz=new Array();
var blob=new Array(); 
var swide=800;
var sleft=0;
var shigh=600;
var sdown=0;
var x=400;
var y=300; 
 
function addLoadEvent(funky) {
  var oldonload=window.onload;
  if (typeof(oldonload)!='function') window.onload=funky;
  else window.onload=function() {
    if (oldonload) oldonload();
    funky();
  }
}
 
addLoadEvent(fill_the_jar);
 
function fill_the_jar() {
var i, dvs;
div=document.createElement('div');
dvs=div.style;
dvs.position='fixed';
dvs.left='0px';
dvs.top='0px';
dvs.width='1px';
dvs.height='1px';
document.body.appendChild(div);
set_scroll();
set_width();
for (i=0; i<blobs; i++) {
  add_blob(i);
  jamjar(i);
}
}
 
function add_blob(ref) {
var dv, sy;
dv=document.createElement('div');
sy=dv.style;
sy.width=size/2+"px";
sy.height=size/2+"px";
sy.borderRadius="50%";
sy.position='absolute';
sy.backgroundColor=colours[ref%colours.length];
do {
ypos[ref]=Math.floor(shigh*Math.random());
xpos[ref]=Math.floor(swide*Math.random());
}
while (checkity(ref));
zpos[ref]=Math.random()*size/4;
dy[ref]=(0.5+Math.random())*(Math.random()>.5?2:-2);
dx[ref]=(0.5+Math.random())*(Math.random()>.5?2:-2);
dz[ref]=(0.5+Math.random())*(Math.random()>.5?.2:-.2);
blob[ref]=dv;
div.appendChild(blob[ref]);
set_blob(ref);
}
 
function checkity(j) {
var i, r=false;
if (j) for (var i=0; i<j; i++) {
if (Math.abs(xpos[i]-xpos[j])<size && Math.abs(ypos[i]-ypos[j])<size) r=true;
}
return (r);
}
 
function rejig(ref, xy) {
  if (xy=='y') {
dx[ref]=(0.5+Math.random())*sign(dx[ref]);
    dy[ref]=(0.5+Math.random())*-sign(dy[ref]);
  }
  else {
    dx[ref]=(0.5+Math.random())*-sign(dx[ref]);
   dy[ref]=(0.5+Math.random())*sign(dy[ref]);
  }
}
 
function sign(a) {
  if (a<0) return (-2);
  else if (a>0) return (2);
  else return (0);
}
 
function set_blob(ref) {
var sy;
sy=blob[ref].style;
sy.top=ypos[ref]-size/4+'px';
sy.left=xpos[ref]-size/4+'px';
    sy.filter='blur('+zpos[ref]+'px)';
}
 
function jamjar(ref) {
var i;
if (ypos[ref]+dy[ref]<-size/2 || ypos[ref]+dy[ref]>shigh+size/2) rejig(ref, 'y');
else if (xpos[ref]+dx[ref]<-size/2 || xpos[ref]+dx[ref]>swide+size/2) rejig(ref, 'x');
else if (Math.abs(ypos[ref]+dy[ref]-y)<size/2 && Math.abs(xpos[ref]+dx[ref]-x)<size/2 && zpos[ref]<size/20) {
if (Math.abs(ypos[ref]+dy[ref]-y)>Math.abs(xpos[ref]+dx[ref]-x)) dy[ref]=-dy[ref];
else dx[ref]=-dx[ref];
}
else for (i=0; i<blobs; i++) {
if (i==ref) continue;
if (Math.abs(ypos[ref]+dy[ref]-ypos[i])<size/2 && Math.abs(xpos[ref]+dx[ref]-xpos[i])<size/2 && Math.abs(zpos[ref]-zpos[i])<size/20) {
if (Math.abs(ypos[ref]+dy[ref]-ypos[i])>Math.abs(xpos[ref]+dx[ref]-xpos[i])) dy[ref]=-dy[ref];
else dx[ref]=-dx[ref];
}
}
ypos[ref]+=dy[ref];
xpos[ref]+=dx[ref];
if (zpos[ref]+dz[ref]<0) dz[ref]=Math.abs(dz[ref]);
else if (zpos[ref]+dz[ref]>size/4) dz[ref]=-Math.abs(dz[ref]);
zpos[ref]+=dz[ref];
set_blob(ref);
setTimeout("jamjar("+ref+")", speed);
}
 
document.onmousemove=mouse;
function mouse(e) {
  if (e) {
    y=e.pageY;
    x=e.pageX;
  }
  else {
    set_scroll();
    y=event.y+sdown;
    x=event.x+sleft;
  }
}
 
document.onscroll=set_scroll;
function set_scroll() {
  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;
  }
}
 
window.onresize=set_width;
function set_width() {
  var sw_min=999999;
  var sh_min=999999;
  if (document.documentElement && document.documentElement.clientWidth) {
    if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
    if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
  }
  if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
    if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
    if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
  }
  if (document.body.clientWidth) {
    if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
    if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
  }
  if (sw_min==999999 || sh_min==999999) {
    sw_min=800;
    sh_min=600;
  }
  swide=sw_min;
  shigh=sh_min;
}
// ]]>
</script>
 
 
 
 
 

(Ha valami nem megy szólj és segítek. virag-78@gportal.hu )

Készült:2021.11.25.

Copyright©2005-2022 Virág Design

 

 
Oldal információ

Portálépítés és portáldíszítés kezdőknek és haladóknak! Rengetek leírás, JavaScriptek , CSS ,HTML kódok,Naptár,Design!
E-mail:virag-78@gportal.hu
Tárhely: gportal.hu
Kategoria:Portálépítés
Indulás:2005.04.12.
URL: jegvirag.gportal.hu
Facebook: Virág Design
Szerkeszto/Design:Virág

Virág1 , Jégvirág , Virgonc , Minta
 
Javascript,Html kód
 
Blog plusz
 
Kiemelt Menü
(Ha a képekre kattintasz akkor az elkövetkező ÜNNEPEKRE,ÉVSZAKOKRA JUTSZ el:( tavaszi menü , nyári menü , őszi menü ,  téli menüjévi menü ,  farsangi menü , valentin napi menü , anyák napi menü  , húsvéti menü , halloween menü , hálaadás menü , karácsonyi menü , születésnapi menü , gyerek napi menü  ) Amiben megtalálsz mindent amihez egy weboldalon szükség lehet.Kellemes weboldalszerkesztést!)
 
Belépés
Felhasználónév:

Jelszó:
SúgóSúgó
Regisztráció
Elfelejtettem a jelszót
 

 

Számláló
Indulás: 2005-04-12
 
Google hirdetés
 
Copyright  © 2005-2025 Virág Design /  www.jegvirag.gportal.hu /  virag-78@gportal.hu

 


Dryvit, hõszigetelés! Vállaljuk családi házak, nyaralók és egyéb épületek homlokzati szigetelését! 0630/583-3168 Hívjon!    *****    A legfrissebb hírek a Super Mario világából és a legteljesebb adatbázis a Mario játékokról.Folyamatosan bõvülõ tartalom.    *****    Gigágá! Márton napján is gyertek a Mesetárba! Nemcsak libát, de kacsát is kaptok! Játsszatok velünk!    *****    A Nintendo a Nintendo Music-kal megint valami kiváló dolgot hozott létre! Alaposan nagyító alá vettem, az eredmény itt.    *****    Leanderek, Parfümök, Olajok, és Szépségápolási termékek! Használd a LEVI10 kupont és kapj 10% kedvezményt!Megnyitottunk    *****    Megjelent a Nintendo saját gyártású órája, a Nintendo Sound Clock Alarmo! Ha kíváncsi vagy, mit tud, itt olvashatsz róla    *****    Megnyílt a webáruházunk! Parfümök, Szépségápolási termékek, Olajok mind egy helyen! Nyitási akciók, siess mert limitált!    *****    Az általam legjobbnak vélt sportanimék listája itt olvasható. Top 10 Sportanime az Anime Odyssey-n!    *****    Pont ITT Pont MOST! Pont NEKED! Már fejlesztés alatt is szebbnél szebb képek! Ha gondolod gyere less be!    *****    Megnyílt a webáruházunk! NYITÁSI AKCIÓK! Tusfürdõ+Fogkrém+Sampon+Izzadásgátló+multifunkcionális balzsam most csak 4.490!    *****    Új mese a Mesetárban! Téged is vár, gyere bátran!    *****    Veterán anime rajongók egyik kedvence a Vadmacska kommandó. Retrospektív cikket olvashatsz róla az Anime Odyssey blogban    *****    Parfümök, Olajok, Párologtatók mind egy weboldalon! Siess mert nyitási AKCIÓNK nem sokáig tart! Nagy kedvezmények várnak    *****    Dryvit, hõszigetelés! Vállaljuk családi házak, nyaralók és egyéb épületek homlokzati szigetelését! 0630/583-3168 Hívjon!    *****    Aki érdeklõdik a horoszkópja után, az nem kíváncsi, hanem intelligens. Rendeld meg most és én segítek az értelmezésben!    *****    A Múzsa, egy gruppi élményei a színfalak mögött + napi agymenések és bölcseletek    *****    KARATE OKTATÁS *** kicsiknek és nagyoknak *** Budapest I. II. XII.kerületekben +36 70 779-55-77    *****    Augusztus 26-án Kutyák Világnapja! Gyertek a Mesetárba, és ünnepeljétek kutyás színezõkkel! Vau-vau!    *****    A horoszkóp elemzésed utáni érdeklõdés, nem kíváncsiság hanem intelligencia. Rendeld meg és nem fogod megbánni. Katt!!!    *****    Cikksorozatba kezdtem a PlayStation történelmérõl. Miért indult nehezen a Sony karrierje a konzoliparban?