nicht angemeldet
Regen ohne performance Einbrüche einbauen?
Hio,
ich hab nen kleines Script geschrieben, was mir ermöglicht inerhalb eines Divs einen netten Regenschauer zu erzeugen. Geht auch ganz gut, nur auf meinem Laptop oder im FF ruckelt es. Nur leider weis ich nicht, wie ich es besser hinbekommen soll. Momentan erzeuge ich mittels Document Write X Wassertropen und lasse die über das Bild jagen. Hierzu das Srcipt:
http://www.makerland.de/regen.html
habt ihr vllt eine bessere idee?
-
Hi,
naja, du wirst schon wissen warum du so ein Script brauchst, hehe.
Das einzige was mir so auf die schnelle eingefallen ist, waere die document.getElementById('drop'+i) evtl. nur einmal zu finden, und in einem aray speichern - wenn das geht, hab nur einen kurzen Blick drauf geworfen.
Abgesehen davon erinnert mich das an Computerspiele der 80er, daher denke ich evtl. an ein Bild, das per Script einfach ueber den Hintergrund verschoben wird. Also von y = 0 nach y++, und nach einem scroll-y von n * 480 wieder auf 0 gesetzt wird, und dann wieder nach unten ...
Nur eine Idee ...
Viel Erfolg!
-
Hi,
ja genau, es ist ja auch für so ein spiel, hehe. nur wie mache ich das mit der großen grafik, das hört sich interessant an.
-
Hi,
ja genau, es ist ja auch für so ein spiel, hehe. nur wie mache ich das mit der großen grafik, das hört sich interessant an.
Tja ... so?
<script>
// haelt Referenz auf das Bild
var img = null;
// initialisiert das ganze
function get_moving()
{
// Referenz nur einmal holen
if(img == null)
img = document.getElementById('img');
// jede Millisekunde die move-Operation aufrufen
// evtl. weniger oft aufrufen, dafuer weiter verschieben, z.B. jede 10 Millisekunde, dafuer um 50 Pixel verschieben ..?
window.setInterval("move_background()", 1);
}// move-Operation
function move_background()
{
// Abstand von oben ermitteln
marginTop = parseInt(img.style.marginTop);
// ganz runter gescrolled => wieder noch oben setzen
if(marginTop == 0)
marginTop = -1920;
// pro Aufruf 10 Pixel nach unten ziehen
img.style.marginTop = (marginTop + 10) + 'px';
}
</script>
</head>
<!-- bei onload initialisieren -->
<body onload="get_moving();">
<!-- ein container, muss nicht sein, is aber besser, sag ich mal, da sich sonst das "margin-top:-1920px;" auf den body bezieht ... ginge auch, aber mei ... -->
<div id="container" style="border:red solid 2px; width:640px; height:480px; overflow:hidden; margin-left:200px;">
<!-- das Bild, das -1920 (= -[480 * 4]) Pixel nach oben verschoben ist -->
<img id="img" src="rain.jpg" style="margin-top:-1920px;">
<div>
</body>
</html>Ich habe dein Site genommen, eine Screenshot gemacht, und das Bild 4 mal untereinander kopiert.
Das kann man noch alles schoener machen, aber vom Prinzip her funktionierts mal.
Der aufruf ist der Prozesso-Killer, wes wegen es auch ruckeln kann ...
window.setInterval("move_background()", X);
An dem X, und an dem ...
img.style.marginTop = (marginTop + Y) + 'px';
... Y musst schrauben, dass es fluessig und huebsch is.
Viel Erfolg!
-
Ui,
bin ich mal gespannt, kannste vllt das bild mal hochladen?? Wäre echt super :D
-
Ui,
bin ich mal gespannt, kannste vllt das bild mal hochladen?? Wäre echt super :D
aber wie schaffe ich es, dass es nicht so abgehackt aussieht? wenn das bild durch ist, springt der ja sofort hoch ^^
-
Moin!
bin ich mal gespannt, kannste vllt das bild mal hochladen?? Wäre echt super :D
aber wie schaffe ich es, dass es nicht so abgehackt aussieht? wenn das bild durch ist, springt der ja sofort hoch ^^
Es wäre vielleicht einfacher, einfach ein animiertes GIF zu produzieren. Das ist mit Sicherheit performanter, und außerdem mußt du dich um dessen korrekte Animation nicht mehr clientseitig kümmern.
- Sven Rautenberg
--
"Love your nation - respect the others."-
Hallo,
das problem ist, das ich doch gerne die PNG Transparenz hätte.. aber das mit dem Gif wäre wohl das Sinnvollste *g*
-
Tja,
das is wohl war ... manchmal sieht man den Wald vor lauter Baeumen nicht ... das is natuerlich richtig.
Vegiss das Script!
-
-
-
-
-
-