Design

BookBlock und Windy: 2 jQuery-Plugins für außergewöhnliche Content-Navigation

19. Oktober 2012
von

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 ist seit 2005 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. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

4 Kommentare zu „BookBlock und Windy: 2 jQuery-Plugins für außergewöhnliche Content-Navigation
  1. Johannes am 20. Oktober 2012 um 08:52

    Sehr interessant, dieses Bilderbuch-Skript. Und wo finde ich WINDy 2 ?

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!