fullPage.js Bild

How-to: Dein ersten fullPage.js One-Pager erstellen

Um ein Produkt zu präsentieren werden immer häufiger Scroll One-Pager genutzt. Scoll One-Pager bezeichnen dabei Internetseiten, welche das gesamte Browser-Fenster ausfüllen und beim scrollen die gesamte Ansicht verändern. Im Folgenden sind einige sehr gute Beispiele für Scroll One-Page aufgelistet:

http://www.yourprimer.com/
http://www.newjumoconcept.com/en/#studio-photos
https://moneytree.jp/
http://urban-walks.com/
http://lingualeo.com/
http://thiswasmybest.com/

Alle Websiten, welche in dieser Liste genannt wurden sind mit dem Open Source JavaScript Framework „fullPage.js“ (https://github.com/alvarotrigo/fullPage.js/) umgesetzt wurden. Dieses Framework ist unter MIT Lizenz veröffentlicht und so sowohl für private, als auch kommerzielle Nutzung kostenfrei.

Coding eines fullPage.js One-Pager

Zunächst muss das fullPage.js-Framework heruntergeladen werden. Es gibt dabei verschiedene Wege das Framework herunter zu laden. Für Anfänger ist es sicher am einfachsten den Download-Button auf der Website zu verwenden (http://alvarotrigo.com/fullPage/). Neben dem Standard-Download kann das fullPage.js-Framework auch über bower (http://bower.io/) oder npm (https://www.npmjs.com/) herunter geladen werden. Falls du dich noch nicht mit npm und bower auskennst solltest du dir auf jeden Fall die beiden verlinkten Seiten anschauen. Bald wird auch zu diesen beiden interessanten JavaScript Werkzeugen ein Artikel auf diesem Blog erscheinen.

Nach dem Download muss das Framework eingebaut werden. Im Folgenden Code siehst du, wie ein solcher Einbau aussehen kann.

Im nächsten Schritt muss die Struktur der Website festgelegt werden. Dabei gibt es von fullPage.js eine feste Definition, wie die Seiten aufgebaut werden müssen.

Anschließend muss nur noch ein JavaScript-Snippet in die Website eingebaut werden.

Nun ist dein One-Pager auch schon fertig. Du kannst Ihn jetzt noch individuell anpassen und mit CSS und JavaScript erweitern.

Falls du dich nicht mit dem Code beschäftigen willst habe ich die fertige Version dieses kleinen Tutorials auf Dropbox hochgeladen. Den fertigen Skript kannst du dir hier – https://www.dropbox.com/sh/da2hdvytyp3wczq/AADUUr2B0ih2Nun9GsoZCZ-Ca?dl=0 – herunterladen. In einem weiteren Blog-Post werde ich erklären, wie du den One Pager gestallten kannst.

marcelengelmann

Schreib ein Kommentar

Kommentar verfassen