einfliegen der Funktionsfelder/ blinkende Spirale

[Auto]

Hallo, ich hab ein Problem und hoffe es kann mir jemand helfen ! Ich möchte gerne auf meiner Startseite die Funktionsfelder (?) Kontakte, Home,usw. auf die Seite einfliegen lassen und dann auf ihren Platz landen lassen :-). Wie macht man das? Kann mir jemand helfen. Und wie erstellt man eine kleine Spirale die sich am Platz bewegt und die "Glieder" die farbe stück für stück bewegen? Danke für eure Hilfe.

[Honkytonk]

Schau mal hier... vieleicht findest du da was...

http://dhtml.seite.net/

[Auto]

sorry, aber da ist leider nix dabei was ich suche :-( trotzdem danke für die Hilfe

[Honkytonk]

Wenn ich dich richtig verstanden habe möchtest du doch einen ähnlichen Effekt erzielen wie bei der oben schon genannten Seite. Suchst du nun ein komplett fertiges Script?

[Auto]

vom Effekt her ja, nur senkrecht an der Kopfseite mit als Link! Wenn jemand den Code schon hat gerne, ansonsten bin ich gerne für Hilfe offen. Danke

[Honkytonk]

Also. Im Grunde genommen wird dein Effekt am besten dadurch erzielt das Layer (Netscape) bzw. All-Objekte (IE) durch genaue Postionierung mit JavaScript durch die Gegend schiebst. Auf/In diesen Elementen steht dann dein Text bzw. Link.

Auf der Milch&Zucker-Startseite wird dieser Effekt auch verwendet. Wenn du mal in den Quelltext schaust findest du 2 Funktionen.

: Moveit() :

var delay=20;


function moveit(was, startx, starty, endx, endy, steps, wait, clip)

{

	if(wait && wait>0)

		setTimeout('moveit('+was+','+startx+','+starty+','+endx+','+endy+','+steps+','+(wait-1)+',"'+clip+'")', delay);

	else

	{

		if(document.layers)

		{

			if(clip==1)

			{

				document.layers["f"+was].clip.right=startx;

				document.layers["f"+was].clip.top=starty;

			} else

			{

				document.layers["f"+was].left=startx;

				document.layers["f"+was].top=starty;

			}

		}

		else

		{

			if(clip==1)

			{

				document.all["f"+was].style.clip="rect("+starty+" "+startx+" 1000 0)";		// "+startx+" "+starty+")";

			} else

			{

				document.all["f"+was].style.left=startx;

				document.all["f"+was].style.top=starty;

			}

		}


		startx+=(endx-startx)/steps;

		starty+=(endy-starty)/steps;


		if(steps>0)

			setTimeout('moveit('+was+','+startx+','+starty+','+endx+','+endy+','+(steps-1)+',0,"'+clip+'")', delay);

		else

			if(was==7)

			{

				if(document.layers)

					document.layers["f7"].left=-1000;

				else

					document.all["f7"].style.left=-1000;


				do_ticker(ttext, 0, 1);

			}

	}

}

Die Funktion hat mehrere Eingabewerte unter anderem die Start und Endkoordinaten. Mit ein Wenig Umstellung solltest du das auch für dein Bedürfnis hinbekommen. : init() :

function init()

{

	if(navigator.appName=="Netscape")

	{

		var w=innerWidth;

		var h=innerHeight;

	} else

	{

		var w=document.body.offsetWidth;

		var h=document.body.offsetHeight;

		f5.style.fontSize='17px';

	}


	var mw=w/2;

	var mh=h/2;


	if(document.layers)

	{

		document.f7.left=mw-160;

	} else

	{

		f7.style.left=mw-160;

		f6.style.left=0;

		wpic.width=w;

		wpic.height=h;

	}


	moveit(1, mw-182, -100, mw-182,  20,  40, 20);	// Milch&Zucker

	moveit(2,    -10,    0,  mw-40,  90,  60);		// Die deutsche

	moveit(3,  w+100,  100, mw-120, 107, 100, 5);		// DynamicHTML

	moveit(4,      w,    0,  mw-17, 150,  80);		// Seite

	moveit(5,    100, h+10, mw-140, 190,  80);		// von...usw.

	moveit(6,      w,  100,      w,   h,  80, 80, 1);

	moveit(7,      0,    0,    355,   0,  30, 80, 1);

}

Im HTML-Body werden nun noch die Layer definiert (also der Inhalt der durch die Gegend geschoben wird)

<div id="f6" class=fpunkte style="top:100;"><img name="wpic" src="pics/w.gif" width=100% height=100%></div>

<div id="f7" class=fpunkte style="top:50; left:-500; clip:rect(0 0 1000 0)"><img src="pics/g.gif" width=355 height=180></div>

<div id="f1" class=fpunkte><img src="pics/xlogo2.gif"></div>

<div id="f2" class=fpunkte style="font-size:18px;">Die deutsche</div>

<div id="f3" class=fpunkte style="font-size:40px;"><i>Dynamic</i>HTML</div>

<div id="f4" class=fpunkte style="font-size:20px;">Seite</div>

<div id="f5" class=fpunkte style="font-size:18px;">von Christoph Bergmann & Hannes Gamperl</div>

Durch die Funktion "onload=init()" im Body-Tag wird dann alles aufgerufen.