Webdesign mit fullPage.js

fullPage.js ist eine jQuery Plugin mit dessen Hilfe man sogenannte single page websites mit beeindruckenden Effekten erstellen kann.

Ich möchte hier einige Beispiele vorstellen, die das Leistungsspektrum dieses Plugins verdeutlichen sollen.

Grundlagen des Einbaus

Die folgenden Dateien müssen eingebunden werden:

  • jQuery selbst, mindestens Version 1.6.0
  • das Plugin jquery.fullPage.js oder dessen optimierte Version jquery.fullPage.min.js
  • die CSS-Datei jquery.fullPage.css

Der head-Bereich sieht dann ungefähr so aus:

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	
	<title>Seitentitel</title>
	<meta name="description" content="Beschreibung" />
	<link rel="stylesheet" type="text/css" href="/assets/fullpage.js/jquery.fullPage.css" />
	<!-- Optional benutzerspezifisches Stylesheet -->
	<link rel="stylesheet" type="text/css" href="/assets/fullpage.js/examples.css" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<!-- Optional jQueryUI für spezielle Effekte -->
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>	
	<script type="text/javascript" src="/assets/fullpage.js/jquery.fullPage.js"></script>
	<!-- Initialisierung fullPage.js -->
	<script type="text/javascript">
	</script>
</head>

Optional kann auch noch jQueryUI eingebunden werden, um weitere Animationseffekte zu nutzen.

Basisbeispiel 01 mit 3 Sektionen

Hier zunächst ein Basisbeispiel, das lediglich aus 3 Slides besteht, die untereinander angeordnet sind.

<body>
	<div id="fullpage">
		<div class="section">
			<h1>Ganz simples Beispiel mit drei Sektionen</h1>
			<h2>Sektion 1</h2>
			<p>Mit den Tasten runter bzw. hoch kann man zur nächsten bzw. zur vorherigen Sektion navigieren.</p>
		</div>
		<div class="section">
			<h2>Sektion 2</h2>
		</div>
		<div class="section">
			<h2>Sektion 3</h2>
		</div>
	</div>
</body>

fullPagejs muss noch initialisiert werden, mindestens so:

	<script type="text/javascript">
		$(document).ready(function() {
			$.fn.fullpage({
			// hier weitere Einstellungen
			});
		});
	</script>

Basisbeispiel 01 fullscreen.js ansehen

Basisbeispiel 02 mit Sektionen und Slides

Man kann so eine Fullscreen-Slideshow noch besser gliedern, in dem man in den einzelnen Sektionen noch eine weitere Unterebene, sogenannte Slides, einfügt.

Beispiel mit bildschirmfüllenden Hintergrundbildern

Dieses Beispiel stammt aus dem Downloadpaket.

Beispiel mit bildschirmfüllenden Hintergrundbildern auf Basis fullscreen.js ansehen