Achtung!

Der Webbaukasten wird nicht mehr aktiv betreut und nicht mehr weiter entwickelt. Verwenden Sie stattdessen das CMS-Angebot des RRZE.
Die Dokumentation des CMS-Angebotes finden Sie auf der Website wordpress.rrze.fau.de.

Inhalt

1. Einleitung

ScrollTeaser ist ein Plugin für jQuery, das eine kleine Hinweismeldung erzeugt, die sich beliebig mit Inhalt füllen und gestalten lässt. Die Meldung erscheint, sobald der Nutzer zum Ende der Seite scrollt und lässt sich so beispielsweise nutzen, um auf weitere interessante und themenbezogene Seiten zu verweisen. Das Erscheinen des Hinweises kann mit verschiedenen Effekten hervorgehoben werden, womit die Aufmerksamkeit des Nutzers unaufdringlich auf die Meldung gezogen wird.

2. Beispiel

Beispiel

Live-Beispiel ansehen

3. Vorbereitung

ScrollTeaser basiert auf der Javascript-Bibliothek jQuery, weshalb diese vor der Einbindung des Plugins zuerst geladen werden muss. jQuery steht auf Externer Link:  http://www.jquery.com/ zum kostenlosen Download zur Verfügung. Speichern Sie die Datei (jquery-X.Y.Z.min.js) vorzugsweise im Ordner /websource/js/ und binden Sie diese folgendermaßen im Header-Bereich des HTML-Codes ein:

<script src="/js/jquery-X.Y.Z.min.js"></script>

X.Y.Z ist mit der entsprechenden Versionsnummer zu ersetzen.

4. Download

Laden Sie sich die Datei scrollteaser.zip herunter und speichern Sie die entpackten Dateien anschließend im Ordner /websource/css/ (basemod_scrollteaser.css) bzw. /websource/js/ (scrollTeaser.jquery.js).

5. Einbindung

Fügen Sie folgende Zeilen im Header-Bereich des HTML-Codes ein:

<link rel="stylesheet" href="/css/basemod_scrollteaser.css" />
<script src="/js/jquery.scrollTeaser.js"></script>

Anschließend platzieren Sie an beliebiger Stelle im Body-Bereich des HTML-Codes folgenden Code zur Initialisierung des ScrollTeasers:

<script>
  $(document).ready( function() {
    $('.scrollTeaser').scrollTeaser();
  } ); 
</script>
<div class="scrollTeaser">##Inhalt##</div>

##Inhalt## ist mit dem entsprechenden Inhalt des ScrollTeasers zu versehen. Dieser darf sämtliche Form von HTML-Code enthalten.

6. Optionen

ScrollTeaser bietet eine Reihe von optionalen Einstellungen, die über den Funktionsaufruf übermittelt werden, beispielsweise:

$('.scrollTeaser').scrollTeaser({animType:'expand',hideable:0});

Es bestehen folgende Einstellungsmöglichkeiten:

  • animType: Legt den Animationstyp fest, mit dem der ScrollTeaser erscheint. Folgende Animationen sind möglich: 'slide', 'fade', 'expand'. Standardwert: 'slide'
  • animSpeed: Legt die Dauer der Animation (in Millisekunden) fest. Standardwert: 300
  • scrollDelay: Legt fest, wie weit man Scrollen muss, bis der ScrollTeaser angezeigt wird. Wert zwischen 0 und 100: Prozentwert der gesamten Seitenhöhe. Wert größer als 100: Absoluter Wert des Scrollfortschritts in Pixeln. Standardwert: 25
  • hideable: Legt fest, ob der ScrollTeaser ausgeblendet werden kann. 1 oder 0. Standardwert: 1
  • setCookie: Legt fest, ob das Ausblenden des ScrollTeaser per Cookie gespeichert werden soll. 1 oder 0. Standardwert: 1

7. Alternative Verwendung

Alternativ kann der ScrollTeaser auch für einen praktischen "Nach oben"-Link verwendet werden, der erst dann angezeigt wird, wenn der Nutzer zum Ende der Seite scrollt. Hierzu genügt folgende Modifikation des Intialisierungs-Codes:

<script>
    $(document).ready( function() {
        $('.seitenmarke').scrollTeaser({animType:'expand', 
        hideable:0, scrollDelay: 25})
        .addClass('upLink scrollTeaser');
    } ); 
</script>

Erfordert, dass ein konventioneller "Nach oben"-Link mit der Klasse "seitenmarke" auf der Seite vorhanden ist, z.B.:

<p class="seitenmarke"><a href="#">Nach oben</a></p>
          

Live-Beispiel ansehen

8. Kompatibilität

ScrollTeaser ist mit allen modernen Browsern kompatibel. Ältere Browserversionen, im Besonderen des Internet Explorers, werden ggf. nicht unterstützt.

9. Lizensierung

ScrollTeaser ist unter der Externer Link:  Attribution 2.0 Generic (CC BY 2.0)-Lizenz lizensiert.