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

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!

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