One Page Design

One Page Design

Als Webprogrammierer bekommt man immer wieder Aufträge die von Designern erstellt wurden die nur eine theoretische Ahnung von der Machbarkeit bestimmter Dinge haben. Und eher auf das Design schauen als auf die Usability oder Suchmaschinenoptimierung. Und so flatterte mir vor Kurzem ein Auftrag für ein One Page Design auf den Schreibtisch.

Folgende Themenstellungen waren umzusetzen:

– Fixer Kopfbereich mit Navigation

– Scrolleffekt (langames scrollen bei Klick auf einen Navigationspunkt)

– Aktive Navigationspunkte nach dem Anklicken

– Aktive Navigationspunkte beim Scrollen durch die Seite

Mit Hilfe der richtigen CSS-Befehle (position: fixed) sowie jQuery konnte alles umgesetzt werden. Folgende Seiten waren mir dabei eine große Hilfe:

Navigation soll sich beim Scrollen ändern

Animiertes Scrollen

jQuery Beispiele

Aktive Navigationspunkte (Bilder) mit Javascript

Schön das im Internet immer schon Mal jemand ein ähnliches Problem/Thema hatte wie man selbst!

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s