Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

One-Page-Webseiten mit Bootstrap, LESS und Sass

One-Page-Navigation verbessern

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Bei One-Page-Webseiten gibt es für den klassischen Scrolling-Effekt fertige JavaScript-Dateien. Dazu zählt etwa die "jQuery-One-Page-Nav".
04:17

Transkript

Jetzt habe ich zwar meine Navigation insofern schon ganz hübsch, weil ich alle aktiven Elemente dann in der Navigation noch aktiv gesetzt habe, aber noch schöner wäre es eigentlich, wenn ich eine Navigation hätte, die so einen leichten Rolleffekt hat, also wo ich dann von der einen Abteilung zur nächsten "rollen" kann. Und dafür gibt es eigentlich einiges an JavaScript-Beispielen, aber ein besonders Hübsches ist von Trevor Davis. Sie finden seine Projekte unter "github.com/davist11". Und eben eins seiner Projekte heißt "jQuery-One-Page-Nav". Das ist genau das, was uns interessiert, wir klicken also auf den Link und haben dann hier auf der rechten Seite die Möglichkeit, Gittertyp zu downloaden. Ich habe es allerdings schon gedownloadet und entpackt -- es ist eine ZIP-Datei -- und habe sie nun hier liegen, und wir wollen uns zuallererst mal den Inhalt anschauen. Es enthält einiges an Beispieldateien, an Beispiel-HTML-Seiten, eine Demo-CSS, eine Readme-Datei und eben auch die jQuery-Datei selbst. Und diese JQuery-Datei werde ich jetzt in meine eigene "Bootstrap"-JavaScript integrieren. Dazu öffne ich es jetzt erst mal mit Notepad++, mit Strg + a markiere ich alles, mit Strg + c kopiere ich alles. Ich schließe es wieder, öffne jetzt meinen Projektordner und gehe hier im Ordner JavaScript auf meine "bootstrap.js". Und da werde ich ganz am Ende die Datei jetzt einfügen, und es ist ganz schön viel, was sie da beiträgt zu einem Scrollerlebnis. Und ich habe hier oben ja die Möglichkeit, mir solch eine Beispielanwendung anzusehen, und ich nehme sie einfach und kopiere sie mir hinüber in meine "index"-Datei. Da habe ich ganz am Ende schon ein Script liegen. Das brauche ich aber so nicht mehr und werde dieses Script durch das von Trevor Davis ersetzen. So, jetzt muss ich noch hier die Sterne entfernen -- die brauche ich jetzt da eigentlich gar nicht. Was ich jetzt tun muss, ist, ich muss meine unsortierte Liste, die meine Navigation enthält, eine eindeutige ID geben. Gut, das mache ich. Hier ist meine Liste, im Moment hat sie nur eine Klasse, das heißt, sie bekommt jetzt von mir noch eine ID, und zwar die id = "top", weil es ja meine Top-Navigation ist. Und mit dieser ID werde ich jetzt hier unten meine Einstellungen verändern, das heißt, meine ID ist "top" und meine aktive Klasse heißt eben nicht "current", sondern im Bootstrap heißt sie "aktive Klasse". "active". "changeHash:false" lasse ich mal und die "scrollSpeed" lass ich jetzt auch mal. Ich speichere alle meine Dateien und muss hier oben beim JavaScript allerdings noch mit "Link wechseln" auf mein normales Bootstrap, sonst werde ich gar nichts merken. Ich speichere jetzt tatsächlich noch mal und werde mir das Ganze in Firefox ansehen, ob es funktioniert. Das heißt, ich klicke auf "Über", und tatsächlich ganz wunderbar jetzt rollen meine Seiten zart vor sich hin. Wenn mir das mit dem Rollen noch eine Nuance zu schnell geht, kann ich die Geschwindigkeit noch etwas hinaufsetzen, sagen wir mal "1250". Ich speichere das Ganze wieder und sehe es mir noch mal an. Ja, jetzt ist der Effekt langsamer, und nachdem meine Seiten nicht allzu lang sind, dürfen wir uns für diesen Effekt ruhig etwas Zeit lassen. Damit haben wir jetzt dank dieses kleinen Code-Schnipsels einen netten Scrollingeffekt für unsere Webseite.

One-Page-Webseiten mit Bootstrap, LESS und Sass

Erstellen Sie eine moderne Website im One-Page-Design, die mit wenigen Dateien auskommt und mit Effekten wie Parallax Scrolling aufwartet.

2 Std. 1 min (28 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!