Webstatt.org - Community seit 2006 - 2012 (2024?)

Div bewegen / animieren

user-344
06.02.2007 20:40
hiho!

ich quäle mich zur Zeit mit der Frage, wie man Divs animieren / bewegen kann.

Ich möchte das sich beim Ereignis A unten rechts im Browserfenster ein Div von unten nach oben aufrollt... also z.B. wie wenn sich jemand im MSN anmeldet, sieht man ja so eine Box die von unten kommt... so ähnlich... nur halt am rechten browser rand.

Wie könnte man sowas umsetzen?

gruss
web4
Avatar user-271
06.02.2007 21:02
du musst den top wert setzen, also den Style verändern,

ist sogar hier im forum: JS und Parabel Bewegungen
links sind down...werde ich bald erneuern, aber unten ist ein Code Beispiel

wenn du ein bisschen Js kannst, sollte das selbsterklärend sein zwinkern wenn nicht fragen!!

du musst halt 1 gschwindigkeit rausnehmen zwinkern und ein bisschen umbauen, aber an sich funktioniert das so zwinkern 
#!/bin/bash
traurig){ neutral:& };:
user-344
07.02.2007 15:04
das habe ich gar noch nicht gesehenlächeln vielen dank!

auf jeden fall, mit js kann ich nicht unbedingt viel anfangen... das beste was ich erreicht habe ist folgendes:



<script language="javascript">

var max_y = 300;

var max_x = 0;

var min_y = 0;

var min_x = -115;



var xvel = 10;

var yvel = 0;



var efficiency = 0.7;



var roll_friction = 0.98;

var fly_friction = 0.99;



function gravity() {



	xcord = document.getElementById("dotz"zwinkern.style.bottom.replace("px",""zwinkern*1;

	ycord = document.getElementById("dotz"zwinkern.style.right.replace("px",""zwinkern*1;



	yvel = yvel-1;



	ycord += yvel;

	xcord += xvel;



	if(ycord >= max_y || ycord <= min_y) {

		yvel = -yvel;

		yvel = Math.round(yvel*efficiency);

		ycord = (ycord >= max_y ? max_y-1 : (ycord <= min_y ? min_y+1 : ycord));

	}

	if(xcord >= max_x || xcord <= min_x) {

		xvel = -xvel;

		xcord = (xcord >= max_x ? max_x-1 : (xcord <= min_x ? min_x+1 : xcord));

	}

	

	xvel = (ycord <= min_y+5 ? (xvel > -0.01 && xvel < 0.01 ? 0 : xvel*roll_friction) : xvel*fly_friction);



	document.getElementById("dotz"zwinkern.style.bottom = xcord;

	document.getElementById("dotz"zwinkern.style.right = ycord;



	//document.getElementById("ausgabe"zwinkern.innerHTML = "XCord: "+xcord+"<br />YCord: "+ycord+"<br />YVel: "+yvel;

	

	window.setTimeout("gravity()",50);

}

//-->

		</script>

	</head>

	<body onLoad="gravity();">

		<div id="ausgabe"></div>

		<div id="dotz" style="position: absolute; bottom: 0px; right: 0px; background-color:#00FF00; float: left; height: 115px; width: 180px;">

			ein Text  der Lang ist<br />

			Un über mehrere Zeilen geht

		</div>

		

		

	</body>

</html>


nicht wirklich packend Fettes Grinsen...

wie (oder mit welchen vars) schaffe ich es, dass die box nur einmal von unten (-115px) nach oben (115px) fährt?
user-344
09.02.2007 07:02
ideen? lächeln
sry für doppelpost.