• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Wie lässt sich der Schnee unter alle Seitenobjekte legen und auf der gesamten Seite anzeigen?

HTML & Co.

Mitglied
Wie lässt sich der Schnee unter alle Seitenobjekte legen und auf der gesamten Seite anzeigen?
(Angenommen, die Seite hat eine Breite von 800 px und eine Höhe von 1500 px. Lassen sich auch Prozentwerte anstelle der Pixelangaben bei diesem Script verwenden?)
Wie geht das?

Danke im Voraus!

Code:
<script type="text/javascript">
/////////////////////////////////////////////////////////
// Javascript made by http://peters1.dk/tools/snow.php //
/////////////////////////////////////////////////////////

// REMEMBER: To change the path, where snow.png is saved...
snow_img = "http://www.domain.com/snow.png";

// EXTRA: You can adjust the numbers of snowflakes you want on each page...
snow_no = 15;

if (typeof(window.pageYOffset) == "number")
{
    snow_browser_width = window.innerWidth;
    snow_browser_height = window.innerHeight;
}
else if (document.body && (document.body.scrollLeft || document.body.scrollTop))
{
    snow_browser_width = document.body.offsetWidth;
    snow_browser_height = document.body.offsetHeight;
}
else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop))
{
    snow_browser_width = document.documentElement.offsetWidth;
    snow_browser_height = document.documentElement.offsetHeight;
}
else
{
    snow_browser_width = 500;
    snow_browser_height = 500;   
}

snow_dx = [];
snow_xp = [];
snow_yp = [];
snow_am = [];
snow_stx = [];
snow_sty = [];

for (i = 0; i < snow_no; i++)
{
    snow_dx[i] = 0;
    snow_xp[i] = Math.random()*(snow_browser_width-50);
    snow_yp[i] = Math.random()*snow_browser_height;
    snow_am[i] = Math.random()*20;
    snow_stx[i] = 0.02 + Math.random()/10;
    snow_sty[i] = 0.7 + Math.random();
    if (i > 0) document.write("<\div id=\"snow_flake"+ i +"\" style=\"position:absolute;z-index:"+i+"\"><\img src=\""+snow_img+"\" border=\"0\"><\/div>"); else document.write("<\div id=\"snow_flake0\" style=\"position:absolute;z-index:0\"><a href=\"http://peters1.dk/tools/snow.php\" target=\"_blank\"><\img src=\""+snow_img+"\" border=\"0\"></a><\/div>");
}

function SnowStart()
{
    for (i = 0; i < snow_no; i++)
    {
        snow_yp[i] += snow_sty[i];
        if (snow_yp[i] > snow_browser_height-50)
        {
            snow_xp[i] = Math.random()*(snow_browser_width-snow_am[i]-30);
            snow_yp[i] = 0;
            snow_stx[i] = 0.02 + Math.random()/10;
            snow_sty[i] = 0.7 + Math.random();
        }
        snow_dx[i] += snow_stx[i];
        document.getElementById("snow_flake"+i).style.top=snow_yp[i]+"px";
        document.getElementById("snow_flake"+i).style.left=snow_xp[i] + snow_am[i]*Math.sin(snow_dx[i])+"px";
    }
    snow_time = setTimeout("SnowStart()", 10);
}
SnowStart();
</script>

 
Werbung:
Gib den "Seitenobjekten" einen z-index der höher ist als der der Schneeflocken (also pauschal mehr als 50 sollte ausreichen). Der z-index wirkt natürlich nur auf nicht-static positionierte Elemente.

Für eine Ausgabe in der Positionen in Prozent müsstest Du den Abschnitt für die Berechnung der Pixelpositionen entsprechend umschreiben.
 
Also, hiermit kann ich doch die Höhe einstellen:
Code:
snow_browser_height = 500
. Wenn ich den Wert durch "1500" ersetze, wandern die Schneeflocken trotzdem nicht bis zum Ende der Seite, sondern wandern genausoweit nach unten, wie mit dem Wert "500".

Gib den "Seitenobjekten" einen z-index der höher ist als der der Schneeflocken (also pauschal mehr als 50 sollte ausreichen). Der z-index wirkt natürlich nur auf nicht-static positionierte Elemente.

Kann ich denn nicht auch einen z-Index für das obige Script verwenden? Das wäre deutlich weniger Arbeit!

Wäre das hier richtig:

Code:
document.getElementById("myDIV").style.zIndex = "-50";
?
Für "myDIV" also "SnowStart"?

Also:
Code:
<script type="text/javascript">
/////////////////////////////////////////////////////////
// Javascript made by http://peters1.dk/tools/snow.php //
/////////////////////////////////////////////////////////
// REMEMBER: To change the path, where snow.png is saved...
snow_img = "http://www.domain.com/snow.png";
// EXTRA: You can adjust the numbers of snowflakes you want on each page...
snow_no = 15;
if (typeof(window.pageYOffset) == "number")
{
    snow_browser_width = window.innerWidth;
    snow_browser_height = window.innerHeight;
}
else if (document.body && (document.body.scrollLeft || document.body.scrollTop))
{
    snow_browser_width = document.body.offsetWidth;
    snow_browser_height = document.body.offsetHeight;
}
else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop))
{
    snow_browser_width = document.documentElement.offsetWidth;
    snow_browser_height = document.documentElement.offsetHeight;
}
else
{
    snow_browser_width = 500;
    snow_browser_height = 500;
}
snow_dx = [];
snow_xp = [];
snow_yp = [];
snow_am = [];
snow_stx = [];
snow_sty = [];
for (i = 0; i < snow_no; i++)
{
    snow_dx[i] = 0;
    snow_xp[i] = Math.random()*(snow_browser_width-50);
    snow_yp[i] = Math.random()*snow_browser_height;
    snow_am[i] = Math.random()*20;
    snow_stx[i] = 0.02 + Math.random()/10;
    snow_sty[i] = 0.7 + Math.random();
    if (i > 0) document.write("<\div id=\"snow_flake"+ i +"\" style=\"position:absolute;z-index:"+i+"\"><\img src=\""+snow_img+"\" border=\"0\"><\/div>"); else document.write("<\div id=\"snow_flake0\" style=\"position:absolute;z-index:0\"><a href=\"http://peters1.dk/tools/snow.php\" target=\"_blank\"><\img src=\""+snow_img+"\" border=\"0\"></a><\/div>");
}
function SnowStart()
{
    for (i = 0; i < snow_no; i++)
    {
        snow_yp[i] += snow_sty[i];
        if (snow_yp[i] > snow_browser_height-50)
        {
            snow_xp[i] = Math.random()*(snow_browser_width-snow_am[i]-30);
            snow_yp[i] = 0;
            snow_stx[i] = 0.02 + Math.random()/10;
            snow_sty[i] = 0.7 + Math.random();
        }
        snow_dx[i] += snow_stx[i];
        document.getElementById("snow_flake"+i).style.top=snow_yp[i]+"px";
        document.getElementById("snow_flake"+i).style.left=snow_xp[i] + snow_am[i]*Math.sin(snow_dx[i])+"px";
    }
    snow_time = setTimeout("SnowStart()", 10);
}
document.getElementById("SnowStart").style.zIndex = "-50";
SnowStart();
</script>

Ich bitte um Korrektur, falls falsch! Danke!
 
Werbung:
Gib den "Seitenobjekten" einen z-index der höher ist als der der Schneeflocken (also pauschal mehr als 50 sollte ausreichen). Der z-index wirkt natürlich nur auf nicht-static positionierte Elemente.

Für eine Ausgabe in der Positionen in Prozent müsstest Du den Abschnitt für die Berechnung der Pixelpositionen entsprechend umschreiben.

Wie geht das denn jetzt bei dem Script?
Ich blicke leider nicht durch.

Ich möchte den Schnee einfach nur hinter alle anderen Objekte (außer das Seiten-Hintergrundbild) legen.
 
Zuletzt bearbeitet:
Gib den "Seitenobjekten" einen z-index der höher ist als der der Schneeflocken (also pauschal mehr als 50 sollte ausreichen). Der z-index wirkt natürlich nur auf nicht-static positionierte Elemente.

Für eine Ausgabe in der Positionen in Prozent müsstest Du den Abschnitt für die Berechnung der Pixelpositionen entsprechend umschreiben.
Wie geht das jetzt bitte mit dem z-Index?
 
Werbung:
Ja, habe ich: http://www.css4you.de/z-index.html

Aber ich weiß nicht, wohin der Befehl muss. Also z-Index:11?

Bitte setze mir das an die richtige Stelle im Code und meine Frage ist geklärt.

Ich bedanke mich herzlich im Voraus!


o_O;):confused:

Code:
<script type="text/javascript">
/////////////////////////////////////////////////////////
// Javascript made by http://peters1.dk/tools/snow.php //
/////////////////////////////////////////////////////////
// REMEMBER: To change the path, where snow.png is saved...
snow_img = "http://www.domain.com/snow.png";
// EXTRA: You can adjust the numbers of snowflakes you want on each page...
snow_no = 15;
if (typeof(window.pageYOffset) == "number")
{
    snow_browser_width = window.innerWidth;
    snow_browser_height = window.innerHeight;
}
else if (document.body && (document.body.scrollLeft || document.body.scrollTop))
{
    snow_browser_width = document.body.offsetWidth;
    snow_browser_height = document.body.offsetHeight;
}
else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop))
{
    snow_browser_width = document.documentElement.offsetWidth;
    snow_browser_height = document.documentElement.offsetHeight;
}
else
{
    snow_browser_width = 500;
    snow_browser_height = 500; 
}
snow_dx = [];
snow_xp = [];
snow_yp = [];
snow_am = [];
snow_stx = [];
snow_sty = [];
for (i = 0; i < snow_no; i++)
{
    snow_dx[i] = 0;
    snow_xp[i] = Math.random()*(snow_browser_width-50);
    snow_yp[i] = Math.random()*snow_browser_height;
    snow_am[i] = Math.random()*20;
    snow_stx[i] = 0.02 + Math.random()/10;
    snow_sty[i] = 0.7 + Math.random();
    if (i > 0) document.write("<\div id=\"snow_flake"+ i +"\" style=\"position:absolute;z-index:"+i+"\"><\img src=\""+snow_img+"\" border=\"0\"><\/div>"); else document.write("<\div id=\"snow_flake0\" style=\"position:absolute;z-index:0\"><a href=\"http://peters1.dk/tools/snow.php\" target=\"_blank\"><\img src=\""+snow_img+"\" border=\"0\"></a><\/div>");
}
function SnowStart()
{
    for (i = 0; i < snow_no; i++)
    {
        snow_yp[i] += snow_sty[i];
        if (snow_yp[i] > snow_browser_height-50)
        {
            snow_xp[i] = Math.random()*(snow_browser_width-snow_am[i]-30);
            snow_yp[i] = 0;
            snow_stx[i] = 0.02 + Math.random()/10;
            snow_sty[i] = 0.7 + Math.random();
        }
        snow_dx[i] += snow_stx[i];
        document.getElementById("snow_flake"+i).style.top=snow_yp[i]+"px";
        document.getElementById("snow_flake"+i).style.left=snow_xp[i] + snow_am[i]*Math.sin(snow_dx[i])+"px";
    }
    snow_time = setTimeout("SnowStart()", 10);
}
SnowStart();
</script>
 
Es würde die Motivation, dir zu helfen, u. U. fördern, wenn Du auf diesen Unsinn mit übergroßer und fetter Schrift verzichten würdest.
Versuch mal, hier einen negativen z-index einzutragen:
HTML:
if (i > 0) document.write("<\div id=\"snow_flake"+ i +"\" style=\"position:absolute;z-index: -50;\">
 
Ja, ich wollte die Schriftgröße im Nachhinein ändern, aber die Beiträge lassen sich nicht mehr ändern …

Danke, Deine Ergänzung klappt hervorragend!

Jetzt noch zwei Fragen zu diesem Thema und dieses Thema ist geschlossen :):
  1. Wie kann ich einstellen, dass der "Schnee" auf der gesamten Seite (Höhe: 2000 px) fällt und nicht nur in den obersten Zentimetern auf dem Bildschirm?
  2. Wie verhindere ich, dass Schneeflocken aus dem sichtbaren Bereich links und rechts "herausfallen", also, wie verringere ich die Breite des Schneefalls auf der x-Achse? Ich habe schon einiges probiert – bislang ohne Erfolg.
 
Werbung:
Hast Du vielleicht eine Testseite online? Dann würde ich es mir mal ansehen.
 
Auf dieser Testseite sieht man alles gut: http://peters1.dk/tools/snow.php
  1. Die Schneeflocken rieseln nur oben (sieht man gut, wenn man ein Stück herunterblättert) und
  2. die Schneeflocken gehen über den seitlichen Rand teilweise hinaus (x-Achse einschränken?).
Das wär's! ;)

Danke für Deine Mühe!
 
Werbung:
Ja, der Fehler wird umso stärker, wenn man nach unten scrollt, dann verschwinden die Schneeflocken nach oben. Der Grund ist, dass die Variable für die Höhe auf Festerhöhe und für die Breite auf Fensterbreite gesetzt wird. Das wäre an sich nicht verkehrt, wenn man dabei die Scrollposition berücksichtigen würde. Um eine einfache Lösung zu bekommen, habe ich jedoch die Höhe auf die Höhe des Dokumentes gesetzt und die Breite analog.
Ersetze dieses:
Code:
if (typeof(window.pageYOffset) == "number")
{
    snow_browser_width = window.innerWidth;
    snow_browser_height = window.innerHeight;
}
else if (document.body && (document.body.scrollLeft || document.body.scrollTop))
{
    snow_browser_width = document.body.offsetWidth;
    snow_browser_height = document.body.offsetHeight;
}
else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop))
{
    snow_browser_width = document.documentElement.offsetWidth;
    snow_browser_height = document.documentElement.offsetHeight;
}
else
{
    snow_browser_width = 500;
    snow_browser_height = 500;
}
durch dieses:
Code:
    snow_browser_width = $(document).width();
    snow_browser_height = $(document).height();
und ganz unten dieses:
Code:
SnowStart();
durch dieses:
Code:
$(window).load(SnowStart);
Außerdem musst Du jetzt jQuery einbinden.
 
Aha! Danke! Das sieht gut aus!

> Außerdem musst Du jetzt jQuery einbinden.

Wo muss ich das jetzt wie einbinden? Läuft das denn nicht so, wie es ist? o_O
 
Werbung:
Jetzt mal ehrlich, so Sachen wie rieselnder Schnee nerven doch nur die Besucher, ich würde das besser nicht einbauen.
 
Ja, es geht nur um ein Logo, dass bei der Startseite im Hintergrund (hinter der transparenten Text-Fläche) den Bildschirm herunterlaufen soll (ein einziges Logo und ganz langsam).

Danke!
 
Werbung:
Zurück
Oben