Schneeflocken in HTML/JS

Jakob_Ullmann · Verfasst: Mo 19.11.07 17:51

Hallo,

ich wollte mal wissen, wie ich auf der HP Schneeflocken runterrießeln lassen kann? Also einfach nur, dass sich da Grafiken bewegen, das mit der realistischen Bewegung krieg ich schon alleine hin. Im Prinzip frage ich mich schon lange, wie man so Objekte bewegen kann. Weiß da jemand eine einfache Lösung?

Yogu · Verfasst: Mo 19.11.07 18:21

Mit Javascript kannst du Objekte eigentlich ganz einfach bewegen, mit getElementById und den zugehörigen Style-Eigenschaften, sofern du deine Objekte als DIV-Element deklariert hast.

markieren

Quelltext

1:
2:
3:

<div class="position:absolute; left:20px; top:20px" background-image:url(schneeflocke.jpg)"; name="schneeflocke"></div>

<script type="text/javascript">document.getElementById("schneeflocke").style.top="20";</script>

So könnte es klappen. Hab grad keine Zeit zum Ausprobieren, aber du musst auch auf die Groß/Kleinschreibung achten.

GTA-Place · Verfasst: Mo 19.11.07 19:03

Bilder als <div>? Hö? Vielleicht wenn in den Schneeflocken noch was stehen soll, aber wofür gibt es <img>? ;-)

_________________
"Wer Ego-Shooter Killerspiele nennt, muss konsequenterweise jeden Horrorstreifen als Killerfilm bezeichnen." (Zeit.de)

Yogu · Verfasst: Mo 19.11.07 19:06

Mit <div> können Elemente schön positioniert werden, und außerdem wird bei Strg+A nicht der ganze Bildschirm blau. Ich verwende auf meiner Seite für die Navigation nur Hintergrundgrafiken, weil das ganze sonst einfach nicht mehr schön aussieht, wenn man mal etwas markiert.

Jakob_Ullmann · Verfasst: Mo 19.11.07 19:45

Und wie mach ich, dass das mit dem Timing hinhaut? Also dass das aller 0,25 Sekunden nach unten bewegt wird? Bin in JavaScript wirklich noch Anfänger.

@GTA-Place: Schön schön, aber wenn ich das Ding positionieren will, sieht's mit <img /> ziemlich schwarz aus. Und für Navigationsleisten und eben Schneeflocken finde ich die DIV+background-image-Lösung eigentlich ganz toll.

Yogu · Verfasst: Mo 19.11.07 19:51

So gehen die sogenannten Timeouts:

markieren

Quelltext

1:
2:
3:
4:
5:
6:
7:
8:

<script type=text/javascript">
  setTimeOut(250, "MoveSnowflakes()");
  function MoveSnowflakes()
  {
    document.getElementById("schneeflocke").style.top = document.getElementById("schneeflocke").style.top + 5
    setTimeOut(250, "MoveSnowflakes()");
  }
</script>

Wenn Schneeflocken auf Englisch Snowflakes heißt, dann müsste es eigentlich funktionieren ... :wink:

Jakob_Ullmann · Verfasst: Mo 19.11.07 20:07

Cool, danke!

Heiko · Beiträge: 3169 Erhaltene Danke: 11

IMHO ist folgendes schöner (ich weiß nicht, ob bei setTimeOut man noch weiter scrollen etc. kann [hab mit der Fkt. eben keine Erfahrung

]):

markieren

Quelltext

1:
2:
3:
4:
5:
6:
7:

function StartTimer(ms){
  tID = setInterval('Calc()', ms);
}

function DeleteTimer(){
  clearInterval(tID);
}

Yogu · Verfasst: Mo 19.11.07 21:05

Stimmt, setInterval ist schöner, weil man die Methode nichts tändig aufrufen muss. Aber das Ergebnis ist gleich - ähnlich der TTimer-Komponente in Delphi. Scrollen etc. kann man schon noch.

zongo-joe · Beiträge: 134 win xp prof D3, D4, D7

also mit

SCHNEEFLOCKEN EFFEKT HTML und 5' Zeit:

nun ist's wieder soweit, der weihnachtsmann kommt bald. viele wollen ihre webseite auf schnee tunen. untenstehend mal die wichtigsten threads der vergangenen jahre, welche schneefall, schneeplugins, schnee auf logos, verschneite webseiten und themen die allgemein zu: "wie mach ich dass es schneit auf meiner webseite" passen ...

Liste aktualisiert. webmichl, 28.11.06

schnee mit java (www.traum-projekt.co...chnee-mit-java.html)
verschneiter text (www.traum-projekt.co...schneiter-text.html)
schnee im hintergrund soll runterrieseln (www.traum-projekt.co...-runterrieseln.html)
macht man diesen schnee effekt (www.traum-projekt.co...-schnee-effekt.html)
schneeplugin ps like gesucht (www.traum-projekt.co...s-like-gesucht.html)
schneeflocken auf der page (www.traum-projekt.co...n-auf-der-page.html)
wie mach ich sowas (www.traum-projekt.co...mach-ich-sowas.html)
schneeflocken ueber bildschirm (www.traum-projekt.co...ber-bildschirm.html)
schneefall mit liegenbleiben (www.traum-projekt.co...-liegenbleiben.html)

Gruß,
Zongo

GTA-Place · Verfasst: Di 20.11.07 14:07

Das Actionscript im letzten Link ist cool, aber geht natürlich nur, wenn die Page Flash verwendet :lol:

_________________
"Wer Ego-Shooter Killerspiele nennt, muss konsequenterweise jeden Horrorstreifen als Killerfilm bezeichnen." (Zeit.de)

Jakob_Ullmann · Verfasst: Mi 21.11.07 18:59

Leider funktioniert das ganze noch nicht. Die Flocke bewegt sich einfach nicht.

markieren

Quelltext

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:

<script type="text/javascript">
var aktiv = window.setInterval(Flocke(), 500);
var i = 1;

function Flocke() {
  document.getElementById("schneeflocke").style.top = document.getElementById("schneeflocke").style.top + 5;
  i = i + 1;
}
</script>

<div class="schneeflocke">
  <img src="snow.gif" alt="Schneeflocke" />
</div>

und hier von der Schneeflockendefinition:

markieren

Quelltext

1:	div.schneeflocke {position: absolute; top: 100px; left: 20px;}

Was mache ich falsch?

PS: JavaScript ist aktiviert.

Yogu · Verfasst: Mi 21.11.07 19:33

Es wäre ganz sinnvoll, wenn du auch das Attribut "id" setzen würdest, wenn du über "getElementById" zugreifst.

Jakob_Ullmann · Verfasst: Mi 21.11.07 19:40

Also <div name="schneeflocke" id="schneeflocke">? Ich habe gerade gemerkt, dass es ja logischerweise id und nicht class sein muss. Wie vereinbahre ich in CSS eine ID?

GTA-Place · Verfasst: Mi 21.11.07 20:22

markieren

Quelltext

1:	div#schneeflocke

_________________
"Wer Ego-Shooter Killerspiele nennt, muss konsequenterweise jeden Horrorstreifen als Killerfilm bezeichnen." (Zeit.de)

Yogu · Verfasst: Mi 21.11.07 20:26

Ich glaube, das Attribut "name" gibt es nicht. Du solltest "id" benutzen. Mit "class" definierst du nur das Aussehen. Wenn du mit "document.getElementById" nicht zurechtkommst, kannst du auch "document.all.OBJEKTNAME" verwenden.

@GTA-Place: mit "div#schneeflocke" definierst du nur Style-Eigenschaften.

Heiko · Beiträge: 3169 Erhaltene Danke: 11

Yogu hat folgendes geschrieben:

@GTA-Place: mit "div#schneeflocke" definierst du nur Style-Eigenschaften.

Jakob_Ullmann hat folgendes geschrieben:

Wie vereinbahre ich in CSS eine ID?

. GTA hat also schon Recht.

Aber was mich immer wieder wundert: div#schneeflocke ist doch sinnlos. Eine id darf doch im Dokument lediglich einmal vergeben werden (wenn ich mich recht entsinne darf die gleiche ID auch nicht bei verschiedenen Elementen auftreten). von daher reicht imho #schneeflocke...

TProgger · Beiträge: 148 XP D6, D2007 prof

#schneeflocke muss im style (am besten in ner css-datei) definiert werden, dann kanst du davon soviele <div's machen wie du willst.

_________________
Wir haben für jede Lösung das richtige Problem

Heiko · Beiträge: 3169 Erhaltene Danke: 11

Nein!. Dafür gibt es Klassen. Mehrfach eine ID zu verwenden ist nicht w3c-konform.

	Mitgliederliste
	Gruppen
	Das Team
	Richtlinien
	Synonyme