Hier mal was für die Bastler unter Euch 🙂

www.nof-tutorials.com/Responsive-Website-Section/

Mein Tutorial findet Ihr ebenfalls unter dem Link oben.

Das ist aber eher etwas für fortgeschrittene User, die sich nicht nur mit NOF sehr gut auskennen, sondern auch Erfahrungen mit HTML5, CSS3 und JavaScript haben.

Full Page Sections

Responsive Website Full Page Sections

Ich habe diese responsive Website mit NOF 2015 erstellt. NOF hat ja leider bisher immer noch keine Version, mit der man über die Werkzeuge responsive Webseiten erstellen kann, insofern habe ich hier einen Weg gesucht und gefunden, die Pixel-Angaben von NOF durch Prozent-Angaben zu ersetzen.

Die zusätzlichen Scripts für die Gestaltung dieser „Full Page Sections“ Anwendung habe ich im Internet gefunden. Diese Scripts sind sehr gut programmiert und wirken entweder über CSS3 oder auch über jQuery und funktionieren an sämtlichen Geräten und in allen Browsern.

Man kann die Seite in den unterschiedlichsten Varianten gestalten und diese auch alle kombinieren:

  • Navigation von einer Sektion in die andere mittels Scrollrad oder Tastatur-Pfeilen
  • Navigation auch über Buttons
  • Navigation über vertikale und/oder horizontale Navigations-Punkte
  • Slider in den einzelnen Sektionen einbauen, um weitere Seiten innerhalb einer Sektion darzustellen
  • Header und Footer einsetzen, fixiert oder auch nicht
  • Fullscreen Hintergrund-Bilder verwenden
  • Fullscreen Hintergrund-Videos verwenden mit oder ohne Ton
  • Gradient Hintergrundfarben
  • Looping nach der letzten Sektion
  • Kontinuierliches Scrollen durch alle Sektionen mit erneutem Start nach der letzten Sektion
  • Easing Effekte
  • Scrollbalken der Seite anzeigen oder auch nicht
  • Scrollbalken innerhalb von Sektionen oder Slidern verwenden für höhere Inhalte

… und vieles mehr.

Print Friendly