Rudolph the red nosed reindeer

Hampelmann CSS Animation von Rudi

In diesem Pen kannst du dir ansehen, wie du aus einer einfachen PNG-Datei einen Rudi im Hampelmann-Style erstellen kannst. Verwendet werden lediglich einfaches HTML, CSS und eine PNG-Datei. Die Körperteile von Rudi werden mit der Hintergrund Clipping-Funktion (background-position) aus dem Bild ausgeschnitten bzw. maskiert.

Bei den Animationen handelt es sich um so genannte Keyframe Animationen.

See the Pen Rudolph the red nosed reindeer by Norbert Mesch (@itsnorbat) on CodePen.


rudi-the-rednosed-reindeer-separated

Das Bild mit den einzelnen Teilen der Figur kannst du dir in voller Auflösung herunterladen, indem du auf das kleine Vorschaubild rechts klickst.

Bilderrätsel für den Webbrowser

Das Bilderrätsel kannst du spielen indem du auf das Bild klickst oder als zip-Datei herunterladen und für nicht kommerzielle Zwecke auf deiner Website mit deinen eigenen Bilder veröffentlichen.

bilderraetsel

Demo auf YouTube

In diesem YouTube-Video kannst du dir das Spiel mit zwei Durchläufen ansehen.

Ändern der Bilder

filestructure-imgZum Ändern der Bilder speicherst du deine Bilder mit einer Auflösung von 200 x 200 px. Die sechs Bilder benennst du mit den Dateinamen in csn01.png bis csn06.png um und kopierst du sie in den Unterordner img. Die alten Bilder kannst du entweder vorher löschen oder beim kopieren einfach überschreiben.
Wenn du die Rückseite der Karten ändern möchtest, ersetzt du einfach im Verzeichnis img die Datei bg_fotomemo.png durch eine Datei deiner Wahl mit der Auflösung 200 x 200 px.

Anpassen der Farben

filestructureWenn du die Farben deines Spiels verändern möchtest benötigst du nur wenige CSS-Kenntnisse. Öffne hierzu die Datei style.css aus den Wurzelverzeichnis und nehme die Änderungen deiner Wahl vor.

Du kannst zum Beispiel den Spielhintergrund im body-Tag über das Attribut background ändern.

body{
 background:#080808;
 font-family: 'Quicksand', sans-serif;
 }

Hier wird die Hintergrundfarbe in einen Rot-Ton geändert.

body{
 background:#850404;
 font-family: 'Quicksand', sans-serif;
 }

MagicNumbers

MagicNumbers ist ein Kartenspiel mit dem du durchaus einige Menschen beeindrucken kannst. Es basiert auf der binären Darstellung der Zahlen 1 bis 31. Für die Darstellung der Zahlen (0)1-31 benötigst du im dualen oder binären Zahlensystem 5 Bits (25 = 32). Die Anzahl der Bits ist gleich der Anzahl der daraus resultierenden Karten, also hier fünf. Das Spiel kann so mit einer anderen Anzahl Bits auch für einen größeren oder kleineren Zahlenraum erstellt werden. In der folgenden Prezi zeige ich dir wie das Spiel funktioniert.

Das Spiel Magic Mind aus meinem Artikel Anzeige mobiler WebApps in WordPress basiert auf dem gleichen Prinzip. Hier erfolgt die Auswertung aber nicht durch einen Spielleiter, sondern automatisch durch ein Programm und anstatt der Zahlen werden Bilder verwendet. Das Spielalgorithmus ist identisch.


Automatisch im Browser abspielen

oder auf meinem YouTube-Kanal ansehen: MagicNumbers auf YouTube


 

MagicNumbers Karten zum drucken

Wenn du auf das Bild klickst kannst du dir eine PDF-Datei herunterladen, die Karten auf Karton drucken, ausscheiden und eine Menge Menschen sprachlos machen.

Magic Numbers Download
Magic Numbers Download

Die Druckvorlage ist für den privaten Gebrauch bestimmt. Eine kommerzielle Verwendung bedarf meiner schriftlichen Genehmigung.

Prezi – Autostart – Autoplay

In diesem Tutorial zeige ich dir, wie du ein Prezi auf deiner Webpräsenz einbinden kannst und es automatisch bei Aufruf der Seite im Autoplay Modus laufen lässt.

Direkt zum Beispiel Autostart Prezi.

Du benötigst dazu ein Prezi, das Prezi Player API (Bitte die Lizenzbedingungen auf der GitHub Seite lesen) und ein bisschen JavaScript.

Prezi automatisch abspielen (Autoplay)

prezi-autoplay
Autoplay

Um ein Prezi automatisch abzuspielen wechselst du in den Präsentationsmodus. Unten rechts in der Präsentation siehst du ein Zahnrad über das du die Autoplay Funktion starten kannst (siehe Abb. Autoplay).

Es lassen sich nur einheitliche Zeiten für alle Schritte deines Prezi auswählen.

Ausnahme: Dein Prezi enthält Audio- oder Video-Dateien. Diese Schritte werde so lange gespielt wie sie dauern. Hier ist allerdings eine Wiederholung ausgeschlossen. D.h., dass die Präsentation nach dem letzten Schritt endet und nicht erneut startet.

Prezi in deine Seite einbetten

Um die Prezi in deine Seite mittels eines iframe-Elementes einzubetten, musst du über die Schaltfläche Einbetten, den Quelltext für das iframe-Element in die Zwischenablage kopieren und anschließend in deine Seite einfügen (siehe Abb. Einbetten).

prezi einbetten
Einbetten
Dialog Einbetten
Dialog Einbetten

Zum kopieren des Codes klickst du auf die Schaltfläche Code in die Zwischenablage kopieren.

Hier siehst du eine eingebettete Prezi:

Diese eingebettete Prezi lässt sich mit hauseigenen Mitteln leider nicht automatisch starten. An dieser Stelle kommt die Prezi Player API ins Spiel.

Eingebettete Prezi automatisch starten (Autostart)

Als erstes musst du dir die JavaScript Bibliothek Prezi Player API auf dieser Seite entweder herunterladen oder den Link auf die JavaScript-Datei kopieren.

<script src="http://prezi.github.io/prezi-player/lib/PreziPlayer/prezi_player.js"></script>

Link zum Einbinden der JavaScript Bibiothek Prezi Player API

Ich zeige hier nur die Möglichkeit eine einfache html-Datei zu erstellen um eine Prezi automatisch zu starten. Das Einbinden in ein CMS wie WordPress oder Joomla wird hier nicht weiter behandelt.

Das Problem | Die Herausforderung

Das API bietet zwar einen Listener .on(event, callback) mit dem Ereignisse des Players überwacht werden können, aber mir ist es bisher nicht gelungen diese mittels der Dokumentation auf der Projektseite zu verwenden. Dabei sollte mittels der Methode .GetStatus() der Player-Status STATUS_CONTENT_READY abgefragt werden. Laut Dokumentation sollte bei erreichen dieses Status die Prezi spielbar sein.

Ich habe mir folgende Lösung ausgedacht: Mit einem Rückwärtszähler (Counter) warte ich nach Aufruf der Seite 5 Sekunden bis die Prezi geladen ist. Danach verwende ich die play-Methode des API um die Prezi automatisch zu starten.

Ich habe mehrere Prezi unterschiedlichen Umfangs mit meiner Lösung getestet und die 5 Sekunden Wartezeit hat bei allen ausgereicht. Wenn die Prezi in einem Zeitraum von 5 Sekunden nicht vollständig geladen werden kann muss ggf. die Zeit oder die Anzahl der Durchläufe erhöht werden.

Die automatisch startende Prezi kannst du dir hier ansehen.

Quelltext Prezi Autostart

Die Funktion start() wird beim Laden der Seite mit dem onload-Ereignis aufgerufen. In der Funktion wird die Variable counter mittels der setInterval-Methode gesetzt. Die Funktion timer() zählt den Zähler count runter und verändert die Ausgabe im span-Element im HTML-Code.

Wenn die Variable count einen Wert kleiner 0 hat wird das Zeitinterval aus der Funktion start() mittels der Methode clearInterval() wieder gelöscht. Anschließend wird die Statuszeile mit der id statusbar aus dem HTML-Dokument mit der Methode removeChild entfernt.

Letztlich wird der Player wird mit der Methode .play(4000) gestartet und die Funktion mit return beendet.

<html>
<style type="text/css">
body{
 border-width: 0px;
 font-family: sans-serif;
 background-color: lightgrey;
}
center{
 margin-top: 100px;
}
</style>
<body onload="start()">
<center>
 <div id="prezi-player" class="player"></div>
 <p id="statusbar">Dein Prezi startet in <span id="anzeigeSekunden">5</span> Sekunden... bitte etwas Geduld!</p>
</center>
<script src="prezi_player.js"></script>
<script type="text/javascript">

// initialize the player object
var player = new PreziPlayer('prezi-player', {
 preziId: "f3r2naszz_qu", /* place your preziID here f3r2naszz_qu*/
 width: "100%",
 height: document.documentElement.clientHeight - 200,
 controls: false,
 explorable: false,
});
// Autorun option
var count = 5;
var counter;
// Start Function
function start() {
 counter = setInterval(timer, 1000);
};
// Define the timer
function timer(){
 var output = document.getElementById("anzeigeSekunden");
 var status = document.getElementById("statusbar");
 output.innerHTML = count;
 count--;
 if (count < 0) {
 clearInterval(counter);
 status.parentNode.removeChild(status); //removes the statusbar under your prezi
 player.play(4000); 
 return;
 }
};
</script>
</body>
</html>