Willkommen in der Webstatt Zum Webstatt Blog und Stories
web4 am 06.02.07 21: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

netcup.de Warum gibt es hier Werbung?
nuit nuit am 06.02.07 22: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 ;) wenn nicht fragen!!

du musst halt 1 gschwindigkeit rausnehmen ;) und ein bisschen umbauen, aber an sich funktioniert das so ;)

web4 am 07.02.07 16:04

das habe ich gar noch nicht gesehen:) 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").style.bottom.replace("px","")*1;
ycord = document.getElementById("dotz").style.right.replace("px","")*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").style.bottom = xcord;
document.getElementById("dotz").style.right = ycord;

//document.getElementById("ausgabe").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 :D...

wie (oder mit welchen vars) schaffe ich es, dass die box nur einmal von unten (-115px) nach oben (115px) fährt?

web4 am 09.02.07 08:02

ideen? :)
sry für doppelpost.

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt