Anleitung & Integration

Im folgenden erklären wir, wie Sie den Schnee Effekt auf Ihrer eigenen Webseite einbinden und anpassen. Bitte befolgen Sie die Schritte der Reihe nach.

Übersicht:

  1. Entpacken der Zip-Datei
  2. Upload der Daten auf den eigenen Server
  3. Schnee Effekt testen
  4. Integration in die eigene Webseite
  5. Der Schnee Konfigurator

 

1. Entpacken der Zip-Datei

Sie haben das Schnee Script soeben als Zip-datei gedownloaded.
Bitte entpacken Sie die Zip-Datei: "ador-design_snow-effect.zip" nun auf Ihrer Festplatte.

2. Upload der Daten auf den eigenen Server

Sie müssen das Schnee Effekt Script auf Ihren Webserver oder Webspace hochladen, damit Sie es einbinden können.
Bitte verbinden Sie sich z.B. per FTP mit Ihrem Server und navigieren Sie in das Root-Verzeichnis Ihrer Webseite. Das Root-Verzeichnis ist die oberste Ebene (Stammverzeichnis) Ihrer Webseite, dort wo sich üblicherweise die Startseite befindet (z.B. index.html).

  • Laden Sie nun die beiden Verzeichnisse: "js" und "images" auf Ihren Webserver hoch.
  • Laden Sie nun die beiden Dateien: "snow_demo_div.html" und "snow_demo_fullscreen.html" auf Ihren Webserver hoch.

3. Schnee Effekt testen

Wenn Sie die Schritte erfolgreich erledigt haben, können Sie nun die beiden Demo-Dateien aufrufen, um zu testen ob die Integration erfolgreich war.
Rufen Sie dazu bitte die folgende URL auf:

  • Vollbild Demo: www.Ihre-Domain.de/snow_demo_fullscreen.html
  • DIV Demo (der Schnee wird nur in dem angegebenen Bereich angezeigt): www.Ihre-Domain.de/snow_demo_div.html

Wenn Sie die beiden Beispiele auf Ihrem eigenen Webserver aufrufen können, war die Integration erfolgreich und der Schnee Effekt ist voll einsatzbereit.

Nun können Sie mit Schritt 4 und der Integration in die eigene Webseite fortfahren.

Hinweis: Nachdem der Test erfolgreich war, können Sie die beiden Dateien (snow_demo_div.html und snow_demo_fullscreen.html) wieder von Ihrem Server löschen. Bedenken Sie aber, dass Sie diese dann nicht mehr aufrufen und anschauen können, wenn Sie ein Beispiel benötigen.

4. Integration in die eigene Webseite

Es gibt zwei Möglichkeiten, den Schnee Effekt auf der eigenen Webseite zu integrieren.

  1. Vollbild (seitenfüllend) über die gesamte Webseite
  2. in einem definierten Bereich (div) auf der Webseite


Grundsätzliche Integration

Unabhängig davon ob Sie Möglichkeit 1 oder 2 der Integration wählen, müssen Sie immer den folgen Schritt erledigen:

Sie müssen die folgenden 2 Zeilen auf jeder Seite, wo der Schnee Effekt erscheinen soll, integrieren.
Platzieren Sie die folgenden 2 Code-Zeilen innerhalb der <body></body> Tags auf Ihrer Webseite. Am besten integrieren Sie den Code ganz am Ende, direkt vor dem schließenden "</body>" Tag:

<body>
    ...
    <script type="text/javascript" src="/js/snow-effect.js"></script>
    ...
</body>

Hinweis: Die "..." dienen lediglich der Veranschaulichung und müssen nicht eingefügt werden! Vor oder nach den "..." kann Inhalt Ihrer Webseite stehen.

 

1. Vollbild-Integration:

Zusätzlich zu der Grundsätzlichen Integration müssen Sie für die Vollbild-Integration den folgenden Schritt erledigen.

Sehen Sie sich als Beispiel den Quellcode (Inhalt) der Datei: "snow_demo_fullscreen.html" an.

Sie müssen die folgende Zeile zusätzlich auf jeder Seite, wo der Schnee Effekt erscheinen soll, integrieren:

<script>goAdorSnow('', -100000, './wolken1.png', true, true, false, 0.5, 0.5, 0.4);</script>

Platzieren Sie die oben stehende Code-Zeile direkt nach den beiden im Schritt zuvor platzierten Zeilen.

Beispiel:

<body>
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Und ich bin ein toller Text...</p>

    <script type="text/javascript" src="/js/snow-effect.js"></script>
    <script>goAdorSnow('', -100000, './wolken1.png', true, true, false, 0.5, 0.5, 0.4);</script>
</body>

 

2. Integration in einen definierten Bereich:

Zusätzlich zu der Grundsätzlichen Integration müssen den folgenden Schritt erledigen.

Sehen Sie sich als Beispiel den Quellcode (Inhalt) der Datei: "snow_demo_div.html" an.

Sie müssen die folgende Zeile zusätzlich auf jeder Seite, wo der Schnee Effekt erscheinen soll, integrieren:

<script>goAdorSnow('meinSchneeDiv', -100000, './wolken1.png', true, true, false, 0.5, 0.5, 0.4);</script>

Zusätzlich müssen Sie nun den Bereich definieren, wo der Schnee Effekt erscheinen soll. In unserem Beispiel nehmen wir das Div-Element mit der ID "meinSchneeDiv".

Beispiel:

<body>
    <h1>Ich bin eine Überschrift</h1>
    <div id="meinSchneeDiv">
        <p>Und ich bin ein toller Text...</p>
    </div>

    <script type="text/javascript" src="/js/snow-effect.js"></script>
    <script>goAdorSnow('meinSchneeDiv', -100000, './wolken1.png', true, true, false, 0.5, 0.5, 0.4);</script>
</body>

Der Schnee Effekt wird nun in dem angegebenen Bereich erscheinen.

Statt "meinSchneeDiv" können Sie das Div-Element auch beliebig anders benennen oder mehrere definieren. Achten Sie aber darauf, dass jedes Div-Element einen eigenen und eindeutigen Namen hat. Um mehrere verschiedene Bereiche mit dem Schnee Effekt zu versehen, müssen Sie dann lediglich die "goAdorSnow..." Zeile kopieren und mit dem entsprechenden Namen duplizieren.

5. Der Schnee Konfigurator

Sie können den Schnee Effekt über unseren Konfigurator beliebig konfigurieren und anpassen.

Den Schnee Effekt Konfigurator finden Sie hier: https://schnee-animation.de/konfigurator

Nach dem Sie den Schnee Effekt konfiguriert haben, finden Sie direkt unter dem Konfigurator den Bereich "Integration". Dort können Sie noch wählen ob der Schnee im Vordergrund oder Hintergrund angezeigt werden soll und anschließend das Code-Snipet kopieren.

Tauschen Sie das Code-Snipet nun einfach gegen das Code-Snipet auf Ihrer eigenen Webseite aus. Das können Sie beliebig oft wiederholen und so den Schnee Effekt ständig verändern wenn gewünscht.

 

0 Artikel Warenkorb