Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Rollerblade.js: Interaktive Panoramen für deine Webseite

360°-Animationen für alle! (Screenshot: Rollerblade)

Mit rollerblade.js können ohne großes Zutun interaktive 360°-Ansichten von Produkten und Panoramen erstellt werden. Wir zeigen euch, wie das Skript funktioniert.

Rollerblade.js ist ein jQuery-Plugin zur Erstellung von interaktiven 360°-Bild-Rotatoren. Das kleine Skript nutzt dabei ein Array mit Pfaden zu einzelnen Grafiken, um eine, vom Benutzer steuerbare, 360°-Ansicht zu realisieren. Zieht der Benutzer die Ansicht mit der Maus, werden die Bilder aus dem Array nacheinander angezeigt, sodass eine interaktive 360°-Ansicht möglich wird.

Rollerblade.js
Mit Rollerblade.js kannst du 360° Ansichten von 3D-Objekten oder Panoramen in deine Webseite einbauen. (Animation: t3n)

Rollerblade.js einsetzen

Um Rollerblade.js in Aktion treten zu lassen, muss zunächst das Stylesheet sowie das Skript selbst in die Webseite eingebunden werden. Für den Betrieb von Rollerblade.js wird außerdem jQuery benötigt.

Für das Markup genügt ein div-Container mit einem Start-Bild:

<div id="target">
<img class="rollerblade-img" src="path/to/image/1.jpg">
</div>

Nun kann das Skript initialisiert werden. Rollerblade.js erwartet zumindest ein Array mit den Pfaden zu den darzustellenden Bildern als Parameter, um ordnungsgemäß funktionieren zu können.

$(document).ready(function() {
$("#target").rollerblade({imageArray:[
'path/to/image/1.jpg',
'path/to/image/2.jpg',
'path/to/image/3.jpg',
'path/to/image/4.jpg',
'and/so/on.jpg'
]});
});

Außerdem ist es möglich mit zusätzlichen Parametern weitere Einstellungen an Rollerblade.js vorzunehmen.

$("#target").rollerblade({
imageArray: arrayOfImages,
sensitivity: 10,
drag: true,
auto: false,
edgeStop: false
});

Der Parameter imageArray beherbergt die jeweiligen Bilder. Mit dem Parameter sensitivity kann die Sensibilität eingestellt werden, mit der das Skript auf die Maus-Bewegungen des Benutzers reagiert. Je niedriger der Wert, desto sensibler das Skript. Über den drag-Parameter kann festgelegt werden, ob Rollerblade.js auf Dragging oder auf Maus-Bewegungen reagieren soll. Ist der Parameter auto auf true gesetzt, wird die Animation automatisch gestartet und Benutzerinteraktionen ignoriert. Wenn der Parameter edgeStop aktiviert wird, kann nur bis zum letzten Frame gedreht werden. Steht er auf false, resultiert dauerhaftes Draggen in einer Dauerschleife der Bilder.

Rollerblade.js funktioniert laut Herstellerangaben in allen modernen Browsern und im Internet Explorer ab Version 9. Außerdem unterstützt Rollerblade.js auch Touchscreen-Geräte. Mehr über das Skript, erfährst du auf der offiziellen Webseite von Rollerblade.js.

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen

Finde einen Job, den du liebst