PortfolioM4

Beispiel mit einem Fullscreen Background als Dia-Show mit einem Bildwechsel alle 5 Sekunden, den ich mit dem Skript
backstretch
hier eingefügt habe. Zum Einzelbild-Beispiel.

Backstretch mit Dia-Show

Bitte folgt meiner Anleitung auf meiner NOF Seite für das Bachstretch Skript.

Ich habe hier also lediglich das Skript "jquery.backstretch.js" und meine 3 Hintergrundbilder händisch in ein Verzeichnis "backstretch" auf meinen Server kopiert und auch in mein lokales Verzeichnis, damit ich das bereits lokal testen kann. Die Bilder haben hier einen Fade-Effekt von 0,75 Sekunden und wechseln alle 5 Sekunden.

Vergesst nicht die Hintergrundfarbe aller Blöcke auf transparent zu setzen, so wie auch in meinem Einzelbild-Beispiel oder meinem Farbverlauf-Tutorial bereits beschrieben.

Kopiert dann die Verweise zum Skript und Bild in die "Page Settings" > "End of <body> code"

<script src="./backstretch/jquery.backstretch.js"></script> 


<script>
       $.backstretch([
          "./backstretch/images/Fliege.jpg",
          "./backstretch/images/Kiefer.jpg",
          "./backstretch/images/Libelle.jpg"
          ], {
          fade: 750,
          duration: 5000
       });
</script>

Mobirise Tutorials

Dieser Footer wurde mit dem "global" Attribut versehen
und muss somit nur einmalig in diesem Projekt geändert werden.
Das funktioniert nur bei der Menüleiste und beim Footer.