jQuery Plugins: tossnCuber

Dieses jQuery Plugin lässt Würfen auf der Webseite, auf der es eingebunden ist erscheinen. Diese Würfel können aus Teilen eines Bildes bestehen.
Frei herunterladen und frei nutzen.

Beispiele Seitenanfang

Beispiel 1

tossnCuber mit roter Hintergrundfarbe:

$('button#toggleCuber').tossnCuber({
	backgroundColor: '#E44D3E',
});

 

Beispiel 2

tossnCuber mit Hintergrundbild und zufälliger Anordnung der einzelenen Würfel:

$('button#toggleCuber').tossnCuber({
	backgroundImage: 'images/bgimage.jpg',
});

 

Beispiel 3

tossnCuber innerhalb des Elements mit der ID "blueBoxOnTheRight":

$('button#toggleCuber').tossnCuber({
	backgroundImage: 'images/bgimage.jpg',
	parent: $('#blueBoxOnTheRight'),
	tileSize: 50,
	onStart: function() {
		window.scrollTo(0, $('#blueBoxOnTheRight').offset().top);
	},
});

 

Beispiel 4

tossnCuber mit Hintergrundbild und ohne zufälliger Anordnung der einzelenen Würfel:

$('button#toggleCuber').tossnCuber({
	backgroundImage: 'images/bgimage.jpg',
	random: false,
});

 

Beispiel 5

Der Inhalt der Seite wird geändert, nachdem tossnCuber abgeschlossen ist:

$('button#toggleCuber').tossnCuber({
	backgroundColor: '#DA5D2E',
	onStart: function() {
		window.scrollTo(0, 0);
	},
	onComplete: function() {
		var html = '<h1>This is the new content!</h1>';
		html += '<p><a href="tossncuber.html">zurück</a></p>';
		$('#content').html(html);
	},
});

 

How to use Seitenanfang

1. jQuery laden

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

2. tossnCuber laden

<script type="text/javascript" src="tossnCuber/js/tossn-cuber.js"></script>

3. Ein Link- oder Buttonelement erstellen

<a href="#" class="toggleCuber">my link</a>

4. Das Plugin mithilfe eines jQuery Selektors ausführen

$(document).ready(function() {
	$('a.toggleCuber').tossnCuber({
		backgroundImage: 'images/bgimage.jpg',
	});
});

Globale Optionen Seitenanfang

Key Typ Standard Beschreibung
tileSize integer 120 Größe der einzelnen Würfel.
random boolean true Würfel in zufälliger Reihenfolge anzeigen?
speed integer 1000 Animationszeit aller Würfel in Millisekunden.
tileSpeed integer 300 Animationszeit der einzelnen Würfel in Millisekunden.
backgroundImage string "" Hintergrundbild.
backgroundColor string "#ffffff" Hintergrundfarbe.
parent DOM Element $(body) Das DOM Element, welchem die Würfel angehängt werden.

Callback Funktionen Seitenanfang

Key Standard Beschreibung
onStart NULL Wird vor dem laden aufgerufen.
onComplete NULL Wird nach dem laden aufgerufen.
onClosed NULL Wird aufgerufen, nachdem die Animation abgelaufen ist.

Inhalt

Herunterladen

Die aktuelle Version herunterladen tossnCuber v1.0.1

Herunterladen!