Autor Beitrag
Jakob_Ullmann
ontopic starontopic starontopic starontopic starontopic starontopic starofftopic starofftopic star
Beiträge: 1747
Erhaltene Danke: 15

Win 7, *Ubuntu GNU/Linux*
*Anjuta* (C, C++, Python), Geany (Vala), Lazarus (Pascal), Eclipse (Java)
BeitragVerfasst: Mo 19.11.07 16: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
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic star
Beiträge: 2598
Erhaltene Danke: 156

Ubuntu 13.04, Win 7
C# (VS 2013)
BeitragVerfasst: Mo 19.11.07 17: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.

ausblenden 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
ontopic starontopic starontopic starontopic starontopic starontopic starofftopic starofftopic star
EE-Regisseur
Beiträge: 5248
Erhaltene Danke: 2

WIN XP, IE 7, FF 2.0
Delphi 7, Lazarus
BeitragVerfasst: Mo 19.11.07 18: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
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic star
Beiträge: 2598
Erhaltene Danke: 156

Ubuntu 13.04, Win 7
C# (VS 2013)
BeitragVerfasst: Mo 19.11.07 18: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 Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starofftopic starofftopic star
Beiträge: 1747
Erhaltene Danke: 15

Win 7, *Ubuntu GNU/Linux*
*Anjuta* (C, C++, Python), Geany (Vala), Lazarus (Pascal), Eclipse (Java)
BeitragVerfasst: Mo 19.11.07 18: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
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic star
Beiträge: 2598
Erhaltene Danke: 156

Ubuntu 13.04, Win 7
C# (VS 2013)
BeitragVerfasst: Mo 19.11.07 18:51 
So gehen die sogenannten Timeouts:

ausblenden 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 Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starofftopic starofftopic star
Beiträge: 1747
Erhaltene Danke: 15

Win 7, *Ubuntu GNU/Linux*
*Anjuta* (C, C++, Python), Geany (Vala), Lazarus (Pascal), Eclipse (Java)
BeitragVerfasst: Mo 19.11.07 19:07 
Cool, danke!
Heiko
ontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic starofftopic star
Beiträge: 3169
Erhaltene Danke: 11



BeitragVerfasst: Mo 19.11.07 19: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 ;) ]):

ausblenden Quelltext
1:
2:
3:
4:
5:
6:
7:
function StartTimer(ms){
  tID = setInterval('Calc()', ms);
}

function DeleteTimer(){
  clearInterval(tID);
}
Yogu
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic star
Beiträge: 2598
Erhaltene Danke: 156

Ubuntu 13.04, Win 7
C# (VS 2013)
BeitragVerfasst: Mo 19.11.07 20: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
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic star
Beiträge: 133

win xp prof
D3, D4, D7
BeitragVerfasst: Di 20.11.07 09:59 
also mit Suche bei Google 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
ontopic starontopic starontopic starontopic starontopic starontopic starofftopic starofftopic star
EE-Regisseur
Beiträge: 5248
Erhaltene Danke: 2

WIN XP, IE 7, FF 2.0
Delphi 7, Lazarus
BeitragVerfasst: Di 20.11.07 13: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 Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starofftopic starofftopic star
Beiträge: 1747
Erhaltene Danke: 15

Win 7, *Ubuntu GNU/Linux*
*Anjuta* (C, C++, Python), Geany (Vala), Lazarus (Pascal), Eclipse (Java)
BeitragVerfasst: Mi 21.11.07 17:59 
Leider funktioniert das ganze noch nicht. Die Flocke bewegt sich einfach nicht.
ausblenden 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:
ausblenden Quelltext
1:
    div.schneeflocke {position: absolute; top: 100px; left: 20px;}					


Was mache ich falsch?

PS: JavaScript ist aktiviert.
Yogu
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic star
Beiträge: 2598
Erhaltene Danke: 156

Ubuntu 13.04, Win 7
C# (VS 2013)
BeitragVerfasst: Mi 21.11.07 18:33 
Es wäre ganz sinnvoll, wenn du auch das Attribut "id" setzen würdest, wenn du über "getElementById" zugreifst.
Jakob_Ullmann Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starofftopic starofftopic star
Beiträge: 1747
Erhaltene Danke: 15

Win 7, *Ubuntu GNU/Linux*
*Anjuta* (C, C++, Python), Geany (Vala), Lazarus (Pascal), Eclipse (Java)
BeitragVerfasst: Mi 21.11.07 18: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
ontopic starontopic starontopic starontopic starontopic starontopic starofftopic starofftopic star
EE-Regisseur
Beiträge: 5248
Erhaltene Danke: 2

WIN XP, IE 7, FF 2.0
Delphi 7, Lazarus
BeitragVerfasst: Mi 21.11.07 19:22 
ausblenden Quelltext
1:
div#schneeflocke					

_________________
"Wer Ego-Shooter Killerspiele nennt, muss konsequenterweise jeden Horrorstreifen als Killerfilm bezeichnen." (Zeit.de)
Yogu
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic star
Beiträge: 2598
Erhaltene Danke: 156

Ubuntu 13.04, Win 7
C# (VS 2013)
BeitragVerfasst: Mi 21.11.07 19: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
ontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic starofftopic star
Beiträge: 3169
Erhaltene Danke: 11



BeitragVerfasst: Mi 21.11.07 20:00 
user profile iconYogu hat folgendes geschrieben:
@GTA-Place: mit "div#schneeflocke" definierst du nur Style-Eigenschaften.


user profile iconJakob_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
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starofftopic star
Beiträge: 148

XP
D6, D2007 prof
BeitragVerfasst: Mi 21.11.07 20:14 
#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
ontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic starofftopic star
Beiträge: 3169
Erhaltene Danke: 11



BeitragVerfasst: Mi 21.11.07 20:17 
Nein!. Dafür gibt es Klassen. Mehrfach eine ID zu verwenden ist nicht w3c-konform.