Schneefall im Header

  • Hat jemand einen Code oder einen Trick, das ich auf dem Headerbild einen schönen Schneefall einbauen kann?

    Ich nutze den Zeta Producer 14.3.3 Business - :evil: :thumbsup:
    Ich meine es auch nicht böse :P

  • Hallo Nemessis,


    am einfachsten geht es sicherlich mit dem Script von Websitetooltester. Im auf der Webseite abgebildeten Script sind die Anführungszeichen falsch geschrieben, also statt eines " sind dort zwei ' hintereinander gesetzt.


    Code
    <script type="text/javascript" src="https://www.websitetooltester.com/snowing"></script>

    habe ich mal als HTML-Quelltext unter http://www.hanabi-pirna.de/test.php eingebunden.


    Hinweis: Durch das Script werden auf dem Rechner des Besuchers Cookies nicht nur für die Dauer der Sitzung abgelegt.


    Original ist das Script von http://peters1.dk/tools/snow.php?l=de. Die Anleitung ist umfachreicher, auch gibt es verschiedene Einstellmöglicheiten.


    Nachtrag: Beim Script vom Websitetooltester werden keine Cookies abgelegt. Fehler von meiner Seite, da war der Browsercache im Weg gewesen.

  • Nachfolgend die Verwendung von Peters Script in der praktischen Zeta-Anwendung:


    Benötigt werden:


    - Das Script (siehe Quelltext)

    - Schneeflocken


    1. Das Script:

    In Zeile 7 ist mit snow_img = " /snow/snow.png" festgelegt, dass als Bild die snow.png im Verzeichnis /snow zu verwenden ist. Ich habe das Script auf den relativen Pfad geändert, damit dieses problemlos in Zeta eingebunden werden kann. Es können beliebig auch andere Bilder verwendet werden, solange sie im Verzeichnis /snow abgelegt werden (Details dazu bei Punkt 2 Schneeflocken).

    In Zeile 10 kann die Anzahl der gleichzeitig erscheinenden Flocken eingestellt werden.

    Das Script wird mit dem Widget "HTML-Quelltext" als oberster Artikel der Seite platziert. Bitte beachtet, dass der Artikel danach nur noch über Umschalten in den Spalten-Modus mit F8 gefunden werden kann. Nach dem Speichern des Artikels fliegen aber zunächst keine Schneeflocken durch die Gegend, sondern nur X-Bilder (die Flocken sind ja noch nicht da).


    2. Schneeflocken:


    auf http://peters1.dk/tools/snow.php?l=de werden ja bereits diverse Schneeflocken angeboten. Soweit ich das in einem ersten Vergleich sehen kann, stammen zumindest die Schneeflocken von http://www.publicdomainpicture…ej.php?hleda=Schneeflocke und sind mit einer CC-0-Lizenz versehen, also bedenkenlos verwendbar. Die gewünschte Schneeflocke also einfach herunterladen und als snow.png speichern. Wenn hier nichts passendes dabei ist, einfach mal hier nach einer farblich passenden Flocke suchen, diese herunterladen und auf passende Größe (z. b. 24 x 24 Pixel) reduzieren.

    Wenn Ihr die Schneeflocke nicht als snow.png, sondern einen anderen Namen verwendet, müsst Ihr die Zeile 7 des Scripts nochmals anpassen. Wichtig st dabei auch die Speicherung im PNG-Format, da JPG keine Transparenz kennt.


    Im nächsten Schritt fügen wird das Bild in Zeta ein:

    - Da der Zugriff über das Script auf die Bild-"Datei" erfolgt, gehen wir über die Dateiverwaltung von Zeta unter "Erweitert" ->"Dateien" ->"Importieren" Bilddatei auswählen auf auf "kopieren" gehen.

    - Auf die neu eingefügte Datei gehen, mit der rechten Maustaste auf "Eigenschaften" und dann auf "Ausgabe" gehen".

    - Dort Häkchen rein bei "Datei an einem anderen Speicherort veröffentlichen" und in das darunterliegende Feld "/snow" eintragen (ohne Anführungszeichen)


    Wenn alles richtig gemacht ist, sollten dann jetzt die Flöckchen fliegen, wie aktuell auf unserer Vereinsseite http://www.hanabi-pirna.de.

  • Ach schade, sowas meinte ich nicht, es soll wie echter Schnee aussehen, kann ich auch ein gif in den Header einfügen?

    Ich nutze den Zeta Producer 14.3.3 Business - :evil: :thumbsup:
    Ich meine es auch nicht böse :P

  • Hallo Nemessis,


    das sollte theoretisch auch gehen, das GIF sollte dann aber exakt die Abmessungen für den Header haben, da es ansonsten nicht mehr funktioniert. Alternative wäre beispielsweise dieses Filmmaterial https://pixabay.com/de/videos/…inter-schneeflocken-1387/, eingebunden über Marios Script für ein Hintergrundvideo https://www.zella.de/code/hintergrund-video.html

  • und sowas wollte ich für das Kopfbild, da gab es mal ein Programm dafür, das finde ich aber nicht mehr und habe den Namen vergessen, damit konnte man solche Effekte erstellen.

    Ich nutze den Zeta Producer 14.3.3 Business - :evil: :thumbsup:
    Ich meine es auch nicht böse :P

  • SUPERMARIO !!!!!! Genau das ist es !!!!!!

    Der Weihnachtsmann soll euch alle die sich hier bemüht haben reichlich beschenken!

    Ich nutze den Zeta Producer 14.3.3 Business - :evil: :thumbsup:
    Ich meine es auch nicht böse :P

  • Aber leider bin ich zu blöd das einzubauen...

    Dieses soeben erstellte Widget packt ihr in einen Container...wie mach ich das denn?

    Ich nutze den Zeta Producer 14.3.3 Business - :evil: :thumbsup:
    Ich meine es auch nicht böse :P

  • Alles super und toll, geht aber so leider nicht auf den Seiten wo ich es einbauen wollte, weil dort mehrere Bilder drin sind, ich brauch ein .gif Bild...

    Schade, aber trotzdem Danke für eure MÜHE!

    Ich nutze den Zeta Producer 14.3.3 Business - :evil: :thumbsup:
    Ich meine es auch nicht böse :P

  • Hier für dein Layout "Technical Responsive" LINK.


    Folgendes ist zu beachten:

    • Da sich das Script über den Header legt sind deine Weiter-Pfeile und -Bullets nicht mehr erreichbar. Deshalb habe ich diese ausgeblendet.
    • In der mobilen Ansicht ist die Header-Höhe nicht zu ermitteln. Deshalb wird hier der Schnee wieder abgeschaltet.
    • Den CSS-Code musst du eventuell noch ein wenig an deine Layout-Breite und Header-Höhe anpassen. Sollte aber im groben schon so passen.
    • In der Zeta Live-Vorschau ist die Darstellung nicht ganz korrekt. In der Browser-Vorschau schon.


    Einstellungen > CSS:


    Ganz am Ende der Seite Widget > Quelltext:

  • Einfach Toll, was du dir immer für Mühe gibst....SUPER Danke,

    Das geht aber nur mit dem Layout?

    Ich nutze den Zeta Producer 14.3.3 Business - :evil: :thumbsup:
    Ich meine es auch nicht böse :P

  • Hallo Forum,


    ich habe das Flat Responsive Layout, da schneit es im Container unter dem Header

    aber leider nicht auf dem Header.

    Habe das css und das Widget Quelltext wie oben eingegeben.

    Breite und Höhe konnte ich beeinflussen.

    Die Anzahl Schneeflocken suche ich noch.


    Woran könnte das liegen.


    vg Bernd Bettinger

    http://www.pospad.ch

  • Hallo Bernd, musst du im CSS anpassen evtl. passt das, was ich auch getestet hatte:


    top:-400px;

    margin-left: -625px;

    width: 1250px;

    height: 400px;


    media (max-width: 1360px)

    Ich nutze den Zeta Producer 14.3.3 Business - :evil: :thumbsup:
    Ich meine es auch nicht böse :P

  • aber es schneit über deine navigation, dann funktioniert die nicht, muss noch etwas tiefer..

    Ich nutze den Zeta Producer 14.3.3 Business - :evil: :thumbsup:
    Ich meine es auch nicht böse :P

  • Schade, setze ich es so tief, dass der Schnee weiter unten beginnt, führt es dazu,

    dass die Navigationspunkte ab dem Schnee nicht gehen.

    Der Schnee müsste hinter die Navigation.

    • In der mobilen Ansicht ist die Header-Höhe nicht zu ermitteln. Deshalb wird hier der Schnee wieder abgeschaltet.

    Ich nutze den Zeta Producer 14.3.3 Business - :evil: :thumbsup:
    Ich meine es auch nicht böse :P

  • Wenn es um diese Jahreszeit auf jeder 2. Seite zu schneien anfängt, dann ist das für mich als Besucher eher ein Grund die Seite schnell zu verlassen. Das ist meine ganz persönliche Meinung dazu, damit stehe ich aber sicher nicht alleine da.

    Was mich als Besucher eher amüsiert ist, wenn z.B. ein Betreiber seinem Logo eine Weihnachtsmannmütze aufsetzt o.Ä. Da erkenne ich dann die Intention, sehe aber gleichzeitig, dass der Betreiber sich Mühe gegeben hat mir die Lesbarkeit der Seite nicht zu erschweren…


    Das nur als Tipp für Mitleser. Solche Effekte oder auch Animationen immer sehr, sehr sparsam und gut überlegt einsetzen. Niemals einen Effekt einsetzen, "weil es halt geht".