Entwickler-Ecke :: Thema anzeigen - Schneeflocken in HTML/JS

Entwickler-Ecke

Beschreibungssprachen - Schneeflocken in HTML/JS

Jakob_Ullmann - Mo 19.11.07 17:51
Titel: Schneeflocken in HTML/JS

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 - Mo 19.11.07 18:21

Mit Javascript kannst du Objekte eigentlich ganz einfach bewegen, mit getElementById [http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id] und den zugehörigen Style-Eigenschaften [http://de.selfhtml.org/javascript/objekte/style.htm#style_eigenschaften], sofern du deine Objekte als DIV-Element deklariert hast.

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 - 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>? ;-)

Yogu - 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 [http://www.yogularm.de/] für die Navigation nur Hintergrundgrafiken, weil das ganze sonst einfach nicht mehr schön aussieht, wenn man mal etwas markiert.

Jakob_Ullmann - 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 - Mo 19.11.07 19:51

So gehen die sogenannten Timeouts:

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 - Mo 19.11.07 20:07

Cool, danke!

Heiko - Mo 19.11.07 20:19

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

Quelltext

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

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

function DeleteTimer(){
  clearInterval(tID);
}

Yogu - 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 - Di 20.11.07 10:59

also mit

GTA-Place - Di 20.11.07 14:07

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

Jakob_Ullmann - Mi 21.11.07 18:59

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

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:

Quelltext

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

Was mache ich falsch?

PS: JavaScript ist aktiviert.

Yogu - 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 - 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 - Mi 21.11.07 20:22

Quelltext

1:	div#schneeflocke

Yogu - 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 - Mi 21.11.07 21:00

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 - Mi 21.11.07 21:14

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

Heiko - Mi 21.11.07 21:17

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

Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2024 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!