Herzspirale

Eine schicke Herzspirale für alle Verliebten.

Da dieses Javascript über die gesamte Seite geht (je nach Einstellung), und ihr natürlich die Möglichkeit haben sollt, den Javascript-Code problemlos für eure Homepage zu kopieren, ist die Demo mal wieder ausgelagert.

Ihr habt in dem Javascript wieder die Möglichkeit, selbst viele Einstellungen zu treffen, um die Ausgabe zu verändern. Spielt einfach ein wenig damit rum und habt Spass dabei 🙂

Klickt hier für die Demo

<!-- präsentiert von kostenlose-javascripts.de --> <script type='text/javascript'> <!-- csx = 430; csy = 250; //Anzahl der Bälle: nb = 99; //Anzahl der Spulen: c = 150; //Radius des Balls: r = 170; //Geschwindigkeit s = 1.4; //für die Geschwindigkeit... pi = Math.PI; pic = pi*c; pic2 = 2*pi*c; // insertAdjacentHTML(), insertAdjacentText() and insertAdjacentElement () // for Netscape 6/Mozilla by Thor Larholm me (at) jscript.dk // Usage: include this code segment at the beginning of your document // before any other Javascript contents. if(typeof HTMLElement!="undefined" && !HTMLElement.prototype.insertAdjacentElement){ HTMLElement.prototype.insertAdjacentElement = function (where,parsedNode) { switch (where){ case 'beforeBegin': this.parentNode.insertBefore(parsedNode,this) break; case 'AfterBegin': this.insertBefore(parsedNode,this.firstChild); break; case 'beforeEnd': this.appendChild(parsedNode); break; case 'afterEnd': if (this.nextSibling) this.parentNode.insertBefore(parsedNode,this.nextSibling); else this.parentNode.appendChild(parsedNode); break; } } HTMLElement.prototype.insertAdjacentHTML = function(where,htmlStr) { var r = this.ownerDocument.createRange(); r.setStartBefore(this); var parsedHTML = r.createContextualFragment(htmlStr); this.insertAdjacentElement(where,parsedHTML); } } document.write('<div style="width: 500px; height: 22px; text-align: center;"></div>'); document.write('<div style="width: 619px; height: 25px; text-align: center;"></div>'); document.write('<div style="position: absolute; top: 86px; left: 136px; width: 346px; height: 30px;"></div>'); document.write('<div align="center">'); document.write('<img class=" alignleft size-full wp-image-333" id="heartsimage2" style="display: none;" src="https://www.kostenlose-javascripts.de/wp-content/uploads/www.kostenlose-javascripts.de__files_images_herzspirale_bullets.gif" align="left" width="14" height="18" width="18" height="18" />'); document.write('<img class=" size-full wp-image-334" id="heartsimage1" style="display: none;" src="https://www.kostenlose-javascripts.de/wp-content/uploads/www.kostenlose-javascripts.de__files_images_herzspirale_beatingheart.gif" width="18" height="18" width="50" height="48" />'); document.write('</div>'); ob=new Array(); function initHearts(){ for(i=0;i<nb;i++){ if(i%2==0) ob[i]=new ball(i,document.getElementById('heartsimage1').src); else ob[i]=new ball(i,document.getElementById('heartsimage2').src); } setInterval("anim()",5) } function anim(){ for(i in ob)ob[i].anim(); } function ball_anim(){ with(this){ t+=0.04; if(t>(s+pic2))t-=(s+pic2); if(t<pic2){ y=r*(t/pic-1); r1=Math.sqrt(r*r-y*y); x=r1*Math.cos(t); z=r1*Math.sin(t); } else{ y=r-2*r*(t-pic2)/s; x=0; z=0; } //perspective effect - smaller numbers give wild effects pf=250/(250-z) is.top=csy+pf*y+"px"; is.left=csx+pf*x+"px"; is.zIndex=parseInt(z); } } function ball(n,img1){ this.t=n*(s+pic2)/nb; document.body.insertAdjacentHTML("AfterBegin", "<img style='position: absolute;' id='heartimg_"+n+"' src='"+img1+"' />"); this.is=document.getElementById('heartimg_'+n).style; // this.is=document.images[0].style; this.anim=ball_anim; } //--> </script> <br /> JavaScript von <a href="http://www.kostenlose-javascripts.de/javascripts/bilder/herzspirale/" target="_blank">kostenlose-javascripts.de</a> <br /> <script type="text/javascript">initHearts();</script> <!-- präsentiert von kostenlose-javascripts.de -->