Autor |
Beitrag |
Jakob_Ullmann
Beiträge: 1747
Erhaltene Danke: 15
Win 7, *Ubuntu GNU/Linux*
*Anjuta* (C, C++, Python), Geany (Vala), Lazarus (Pascal), Eclipse (Java)
|
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
Beiträge: 2598
Erhaltene Danke: 156
Ubuntu 13.04, Win 7
C# (VS 2013)
|
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.
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
Beiträge: 5248
Erhaltene Danke: 2
WIN XP, IE 7, FF 2.0
Delphi 7, Lazarus
|
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
Beiträge: 2598
Erhaltene Danke: 156
Ubuntu 13.04, Win 7
C# (VS 2013)
|
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
Beiträge: 1747
Erhaltene Danke: 15
Win 7, *Ubuntu GNU/Linux*
*Anjuta* (C, C++, Python), Geany (Vala), Lazarus (Pascal), Eclipse (Java)
|
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
Beiträge: 2598
Erhaltene Danke: 156
Ubuntu 13.04, Win 7
C# (VS 2013)
|
Verfasst: 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 ...
|
|
Jakob_Ullmann
Beiträge: 1747
Erhaltene Danke: 15
Win 7, *Ubuntu GNU/Linux*
*Anjuta* (C, C++, Python), Geany (Vala), Lazarus (Pascal), Eclipse (Java)
|
Verfasst: Mo 19.11.07 20:07
|
|
Heiko
Beiträge: 3169
Erhaltene Danke: 11
|
Verfasst: 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
Beiträge: 2598
Erhaltene Danke: 156
Ubuntu 13.04, Win 7
C# (VS 2013)
|
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
|
Verfasst: Di 20.11.07 10:59
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
Beiträge: 5248
Erhaltene Danke: 2
WIN XP, IE 7, FF 2.0
Delphi 7, Lazarus
|
Verfasst: Di 20.11.07 14:07
Das Actionscript im letzten Link ist cool, aber geht natürlich nur, wenn die Page Flash verwendet
_________________ "Wer Ego-Shooter Killerspiele nennt, muss konsequenterweise jeden Horrorstreifen als Killerfilm bezeichnen." (Zeit.de)
|
|
Jakob_Ullmann
Beiträge: 1747
Erhaltene Danke: 15
Win 7, *Ubuntu GNU/Linux*
*Anjuta* (C, C++, Python), Geany (Vala), Lazarus (Pascal), Eclipse (Java)
|
Verfasst: 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
Beiträge: 2598
Erhaltene Danke: 156
Ubuntu 13.04, Win 7
C# (VS 2013)
|
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
Beiträge: 1747
Erhaltene Danke: 15
Win 7, *Ubuntu GNU/Linux*
*Anjuta* (C, C++, Python), Geany (Vala), Lazarus (Pascal), Eclipse (Java)
|
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
Beiträge: 5248
Erhaltene Danke: 2
WIN XP, IE 7, FF 2.0
Delphi 7, Lazarus
|
Verfasst: Mi 21.11.07 20:22
Quelltext
_________________ "Wer Ego-Shooter Killerspiele nennt, muss konsequenterweise jeden Horrorstreifen als Killerfilm bezeichnen." (Zeit.de)
|
|
Yogu
Beiträge: 2598
Erhaltene Danke: 156
Ubuntu 13.04, Win 7
C# (VS 2013)
|
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
|
Verfasst: 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
Beiträge: 148
XP
D6, D2007 prof
|
Verfasst: 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.
_________________ Wir haben für jede Lösung das richtige Problem
|
|
Heiko
Beiträge: 3169
Erhaltene Danke: 11
|
Verfasst: Mi 21.11.07 21:17
Nein!. Dafür gibt es Klassen. Mehrfach eine ID zu verwenden ist nicht w3c-konform.
|
|