Es gibt unüberschaubar viele jQuery-Plugins, mit denen man durch Inhalte wie Fotos mehr oder weniger elegant navigieren kann. Dass wir mit BookBlock und Windy zwei weitere vorstellen, liegt an den schicken Animationseffekten und den Einstellungsmöglichkeiten, mit denen die Plugins sehr unterschiedlich und individuell eingesetzt werden können.

Die beiden Plugins von Codrops verwenden zur Animation entsprechende CSS3-Eigenschaften. Die Auszeichnung der Inhalte erfolgt über HTML, welches per Plugin in Form und Bewegung gebracht wird.

Content-Flip mit BookBlock

„Flip-Page“ mit BookBlock

BookBlock ist ein Plugin, welches Inhalte in Form eines Buches („Flip-Page“) darstellt. Via CSS3-Animation wird per Klick in die Navigation umgeblättert. Die Inhalte und die Navigation sind einfach per HTML ausgezeichnet, sodass beides sehr individuell und unabhängig voneinander gestaltet werden kann.

Per DIV-Element erstellt man die Inhalte:

1
2
3
4
5
6
7
8
9

<div id="bb-bookblock" class="bb-bookblock">
  <div class="bb-item">
    <img src="bild1.jpg" alt="" />
  </div>
  <div class="bb-item">
    <img src="bild1.jpg" alt="" />
  </div>
  …
</div>

Jede Seite des Booklets erhält einen Container mit der Klasse bb-item. Darüber hinaus werden für die Navigation zwei Links mit IDs versehen:

1
2

<a id="bb-nav-next" href="#">weiter</a>
<a id="bb-nav-prev" href="#">zurück</a>

Anschließend muss dem Ganzen noch die Funktionalität des Plugins zugewiesen werden. Vor allem die Zuweisung der Link-IDs ist wichtig:

1
2
3
4
5
6

$(function() {
  $("#bb-bookblock").bookblock({
    nextEl: "#bb-nav-next",
    prevEl: "#bb-nav-prev"
  });
});

Es gibt weitere Einstellungsmöglichkeiten, beispielsweise für die Geschwindigkeit der Animation, sowie für die Darstellung des Schattenwurfs beim Umblättern.

Swift-Content mit Windy

„Swift-Content“ mit Windy

Windy stellt Inhalte als Einzelblätter dar, welche unter Benutzung der Navigation weggeweht werden und so den Blick auf das darunter liegende Blatt freigeben. Auch hier wird der Inhalt zunächst per HTML ausgezeichnet:

1
2
3
4
5

<ul class="wi-container">
  <li><img src="bild1.jpg" /></li>
  <li><img src="bild2.jpg" /></li>
  …
</ul>

Anschließend erfolgt die Zuweisung des Plugin:

1

$("<code>#wi-el"</code><code>).windy();</code>

Die Navigation wird auf die gleiche Weise definiert wie bei BookBlock auch. Allerdings gibt es als Alternative die Möglichkeit, die Navigation über einen Slider zu realisieren:

1

<div id="slider"></div>

Der Container wird mit der jQuery-UI-Funktion slider ausgestattet:

1
2
3
4
5
6
7
8

$("#slider").slider({
  animate : true,
  min: 0,
  max: windy.getItemsCount() - 1,
  slide: function(event, ui) {
    windy.navigate(ui.value);
  }
});

Für beide Plugins muss jQuery (für die Slider-Navigation zusätzlich jQuery-UI) eingebunden sein. Es gibt die Plugins inklusive Beispiel und CSS-Dateien als ZIP-Datei zum Download. Da die Gestaltung komplett per CSS geregelt ist, kann diese bequem geändert und angepasst werden.

(dpe)

Denis Potschien

Seit 2005 ist er freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

• Web
|
• Facebook
|
• Google+
|
• More Posts (155)